@atlaskit/editor-common 102.13.2 → 102.13.4

package/dist/es2019/react-node-view/getInlineNodeViewProducer.js

@@ -18,65 +18,155 @@ import { generateUniqueNodeKey } from './generateUniqueNodeKey';
 import { getOrCreateOnVisibleObserver } from './onVisibleObserverFactory';
 const isSSR = Boolean(process.env.REACT_SSR);
 export const inlineNodeViewClassname = 'inlineNodeView';
-
-// number of initial nodes to allow React to render before switching to fallback
-let initialReactRenderedNodeCount = 0;
 const canRenderFallback = node => {
   return node.type.isInline && node.type.isAtom && node.type.isLeaf;
 };
 
 // list of inline nodes with toDOM fallback implementations that can be virtualized. As
 // additional nodes are converted they should be added here
-const virtualizedNodeWhitelist = ['status', 'mention', 'emoji', 'date', 'inlineCard'];
-const virtualisationConfiguration = () => {
-  let enableVirtualization = false;
-  let reactRenderedDocumentPositionThreshold = 0;
-  if (isSSR) {
-    return {
-      enableVirtualization,
-      reactRenderedDocumentPositionThreshold,
-      virtualizeCurrentNode: () => false
-    };
-  }
+const virtualizedNodeAllowlist = ['status', 'mention', 'emoji', 'date', 'inlineCard'];
+function checkExperimentExposure() {
   if (editorExperiment('platform_editor_inline_node_virtualization', 'off', {
     exposure: true
   })) {
-    enableVirtualization = false;
-  } else if (editorExperiment('platform_editor_inline_node_virtualization', 'fallback-small', {
-    exposure: true
-  })) {
-    enableVirtualization = true;
-    reactRenderedDocumentPositionThreshold = 100;
-  } else if (editorExperiment('platform_editor_inline_node_virtualization', 'fallback-large', {
+    return false;
+  }
+  if (editorExperiment('platform_editor_inline_node_virtualization', 'fallback-small', {
     exposure: true
   })) {
-    enableVirtualization = true;
-    reactRenderedDocumentPositionThreshold = 400;
+    return true;
   }
+  return false;
+}
+function createNodeView({
+  nodeViewParams,
+  pmPluginFactoryParams,
+  Component,
+  extraComponentProps,
+  extraNodeViewProps
+}) {
+  // We set a variable for the current node which is
+  // used for comparisions when doing updates, before being
+  // overwritten to the updated node.
+  let currentNode = nodeViewParams.node;
+  const key = generateUniqueNodeKey();
 
-  // we need to be able to override the threshold to 0
-  // for specific situation, primarily testing
-  if (reactRenderedDocumentPositionThreshold !== 0 && fg('platform_editor_inline_node_virt_threshold_override')) {
-    reactRenderedDocumentPositionThreshold = 0;
+  // First we setup the dom element which will be rendered and "tracked" by prosemirror
+  // and also used as a "editor portal" (not react portal) target by the editor
+  // portal provider api, for rendering the Component passed.
+
+  let domRef = document.createElement('span');
+  domRef.contentEditable = 'false';
+  setDomAttrs(nodeViewParams.node, domRef);
+  const fallbackRef = {
+    current: null
+  };
+
+  // @see ED-3790
+  // something gets messed up during mutation processing inside of a
+  // nodeView if DOM structure has nested plain "div"s, it doesn't see the
+  // difference between them and it kills the nodeView
+  domRef.classList.add(`${nodeViewParams.node.type.name}View-content-wrap`, `${inlineNodeViewClassname}`);
+
+  // This util is shared for tracking rendering, and the ErrorBoundary that
+  // is setup to wrap the Component when rendering
+  // NOTE: This is not a prosemirror dispatch
+  function dispatchAnalyticsEvent(payload) {
+    pmPluginFactoryParams.eventDispatcher.emit(analyticsEventKey, {
+      payload
+    });
   }
-  return {
-    enableVirtualization,
-    reactRenderedDocumentPositionThreshold,
-    virtualizeCurrentNode: nodeType => enableVirtualization && virtualizedNodeWhitelist.includes(nodeType) && !(initialReactRenderedNodeCount < reactRenderedDocumentPositionThreshold)
+
+  // This is called to render the Component into domRef which is inside the
+  // prosemirror View.
+  // Internally it uses the unstable_renderSubtreeIntoContainer api to render,
+  // to the passed dom element (domRef) which means it is automatically
+  // "cleaned up" when you do a "re render".
+  function renderComponent() {
+    pmPluginFactoryParams.portalProviderAPI.render(getPortalChildren({
+      dispatchAnalyticsEvent,
+      currentNode,
+      nodeViewParams,
+      Component,
+      extraComponentProps
+    }), domRef, key);
+  }
+  const {
+    samplingRate,
+    slowThreshold,
+    trackingEnabled
+  } = getPerformanceOptions(nodeViewParams.view);
+  trackingEnabled && startMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name
+  });
+
+  // We render the component while creating the node view
+  renderComponent();
+  trackingEnabled && stopMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name,
+    dispatchAnalyticsEvent,
+    samplingRate,
+    slowThreshold
+  });
+  const extraNodeViewPropsWithStopEvent = {
+    ...extraNodeViewProps
   };
-};
-function createNodeView({
+
+  // https://prosemirror.net/docs/ref/#view.NodeView
+  const nodeView = {
+    get dom() {
+      return domRef;
+    },
+    update(nextNode, _decorations) {
+      // Let ProseMirror handle the update if node types are different.
+      // This prevents an issue where it was not possible to select the
+      // inline node view then replace it by entering text - the node
+      // view contents would be deleted but the node view itself would
+      // stay in the view and become uneditable.
+      if (currentNode.type !== nextNode.type) {
+        return false;
+      }
+      // On updates, we only set the new attributes if the type, attributes, and marks
+      // have changed on the node.
+
+      // NOTE: this could mean attrs changes aren't reflected in the dom,
+      // when an attribute key which was previously present is no longer
+      // present.
+      // ie.
+      // -> Original attributes { text: "hello world", color: "red" }
+      // -> Updated attributes { color: "blue" }
+      // in this case, the dom text attribute will not be cleared.
+      //
+      // This may not be an issue with any of our current node schemas.
+      if (!currentNode.sameMarkup(nextNode)) {
+        setDomAttrs(nextNode, domRef);
+      }
+      currentNode = nextNode;
+      renderComponent();
+      return true;
+    },
+    destroy() {
+      // When prosemirror destroys the node view, we need to clean up
+      // what we have previously rendered using the editor portal
+      // provider api.
+      pmPluginFactoryParams.portalProviderAPI.remove(key);
+      // @ts-expect-error Expect an error as domRef is expected to be
+      // of HTMLSpanElement type however once the node view has
+      // been destroyed no other consumers should still be using it.
+      domRef = undefined;
+      fallbackRef.current = null;
+    },
+    ...extraNodeViewPropsWithStopEvent
+  };
+  return nodeView;
+}
+function createNodeViewVirtualized({
   nodeViewParams,
   pmPluginFactoryParams,
   Component,
   extraComponentProps,
   extraNodeViewProps
 }) {
-  const {
-    enableVirtualization,
-    virtualizeCurrentNode
-  } = virtualisationConfiguration();
-  const virtualizeNode = virtualizeCurrentNode(nodeViewParams.node.type.name);
   // We set a variable for the current node which is
   // used for comparisions when doing updates, before being
   // overwritten to the updated node.
@@ -128,18 +218,20 @@ function createNodeView({
       nodeViewParams,
       Component,
       extraComponentProps
-    }), domRef, key, enableVirtualization ? onBeforeReactDomRender : undefined);
+    }), domRef, key, onBeforeReactDomRender);
   }
   let didRenderComponentWithIntersectionObserver = false;
   let destroyed = false;
   let removeIntersectionObserver = () => {};
   function renderFallback() {
     var _currentNode$type, _currentNode$type$spe;
-    if (canRenderFallback(currentNode) && typeof ((_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : (_currentNode$type$spe = _currentNode$type.spec) === null || _currentNode$type$spe === void 0 ? void 0 : _currentNode$type$spe.toDOM) === 'function') {
-      const fallback = DOMSerializer.renderSpec(document, currentNode.type.spec.toDOM(currentNode));
-      fallbackRef.current = fallback.dom;
-      domRef.replaceChildren(fallback.dom);
+    if (!canRenderFallback(currentNode) || typeof ((_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : (_currentNode$type$spe = _currentNode$type.spec) === null || _currentNode$type$spe === void 0 ? void 0 : _currentNode$type$spe.toDOM) !== 'function') {
+      return;
     }
+    const fallback = DOMSerializer.renderSpec(document, currentNode.type.spec.toDOM(currentNode));
+    const dom = fallback.dom;
+    fallbackRef.current = dom;
+    domRef.replaceChildren(dom);
   }
   function attachNodeViewObserver() {
     const observer = getOrCreateOnVisibleObserver(nodeViewParams.view);
@@ -152,47 +244,22 @@ function createNodeView({
       });
     }
   }
-  if (virtualizeNode) {
-    renderFallback();
-    // allow the fallback to render first before attaching the observer.
-    // Will tweak this in a follow up PR to optimise rendering of visible
-    // nodes without fallback rendering.
-    setTimeout(() => {
-      attachNodeViewObserver();
-    }, 0);
-  } else {
-    initialReactRenderedNodeCount = initialReactRenderedNodeCount + 1;
-    const {
-      samplingRate,
-      slowThreshold,
-      trackingEnabled
-    } = getPerformanceOptions(nodeViewParams.view);
-    trackingEnabled && startMeasureReactNodeViewRendered({
-      nodeTypeName: currentNode.type.name
-    });
-
-    // We render the component while creating the node view
-    renderComponent();
-    trackingEnabled && stopMeasureReactNodeViewRendered({
-      nodeTypeName: currentNode.type.name,
-      dispatchAnalyticsEvent,
-      samplingRate,
-      slowThreshold
-    });
-  }
+  renderFallback();
+  // allow the fallback to render first before attaching the observer.
+  // Will tweak this in a follow up PR to optimise rendering of visible
+  // nodes without fallback rendering.
+  setTimeout(() => {
+    attachNodeViewObserver();
+  }, 0);
   const extraNodeViewPropsWithStopEvent = {
     ...extraNodeViewProps,
-    ...(enableVirtualization ? {
-      // This is not related to virtualization, but it's something we should fix/handle
-      // Remove this comment when virtualization experiment is cleaned up
-      stopEvent(event) {
-        const maybeStopEvent = extraNodeViewProps === null || extraNodeViewProps === void 0 ? void 0 : extraNodeViewProps.stopEvent;
-        if (typeof maybeStopEvent === 'function') {
-          return maybeStopEvent(event);
-        }
-        return false;
+    stopEvent: event => {
+      const maybeStopEvent = extraNodeViewProps === null || extraNodeViewProps === void 0 ? void 0 : extraNodeViewProps.stopEvent;
+      if (typeof maybeStopEvent === 'function') {
+        return maybeStopEvent(event);
       }
-    } : {})
+      return false;
+    }
   };
 
   // https://prosemirror.net/docs/ref/#view.NodeView
@@ -225,19 +292,14 @@ function createNodeView({
         setDomAttrs(nextNode, domRef);
       }
       currentNode = nextNode;
-      if (virtualizeNode) {
-        if (didRenderComponentWithIntersectionObserver) {
-          renderComponent();
-        }
-      } else {
+      if (didRenderComponentWithIntersectionObserver) {
         renderComponent();
       }
       return true;
     },
     destroy() {
-      if (virtualizeNode) {
-        removeIntersectionObserver();
-      }
+      removeIntersectionObserver();
+      destroyed = true;
 
       // When prosemirror destroys the node view, we need to clean up
       // what we have previously rendered using the editor portal
@@ -248,9 +310,6 @@ function createNodeView({
       // been destroyed no other consumers should still be using it.
       domRef = undefined;
       fallbackRef.current = null;
-      if (virtualizeNode) {
-        destroyed = true;
-      }
     },
     ...extraNodeViewPropsWithStopEvent
   };
@@ -343,6 +402,7 @@ function getPortalChildren({
 //   [nodeViewName: string]: NodeViewProducer
 // }
 
+const counterPerEditorViewMap = new WeakMap();
 // This return of this function is intended to be the value of a key
 // in a ProseMirror nodeViews object.
 export function getInlineNodeViewProducer({
@@ -352,10 +412,13 @@ export function getInlineNodeViewProducer({
   extraNodeViewProps
 }) {
   function nodeViewProducer(...nodeViewProducerParameters) {
-    const nodeView = createNodeView({
+    var _node$type;
+    const view = nodeViewProducerParameters[1];
+    const node = nodeViewProducerParameters[0];
+    const parameters = {
       nodeViewParams: {
-        node: nodeViewProducerParameters[0],
-        view: nodeViewProducerParameters[1],
+        node,
+        view,
         getPos: nodeViewProducerParameters[2],
         decorations: nodeViewProducerParameters[3]
       },
@@ -363,8 +426,29 @@ export function getInlineNodeViewProducer({
       Component,
       extraComponentProps,
       extraNodeViewProps
-    });
-    return nodeView;
+    };
+    const isNodeTypeAllowedToBeVirtualized = virtualizedNodeAllowlist.includes((node === null || node === void 0 ? void 0 : (_node$type = node.type) === null || _node$type === void 0 ? void 0 : _node$type.name) || '');
+    if (!isNodeTypeAllowedToBeVirtualized || isSSR) {
+      return createNodeView(parameters);
+    }
+    if (fg('platform_editor_inline_node_virt_threshold_override')) {
+      return createNodeViewVirtualized(parameters);
+    }
+    let inlineNodeViewsVirtualizationCounter = counterPerEditorViewMap.get(view) || 0;
+    inlineNodeViewsVirtualizationCounter += 1;
+    counterPerEditorViewMap.set(view, inlineNodeViewsVirtualizationCounter);
+
+    // We never virtualize the 100th first elements
+    if (inlineNodeViewsVirtualizationCounter <= 100) {
+      return createNodeView(parameters);
+    }
+    if (
+    // Due to the experiment, we need to check experiment exposure
+    // when a document has more than 100 (virtulizables) nodes.
+    checkExperimentExposure()) {
+      return createNodeViewVirtualized(parameters);
+    }
+    return createNodeView(parameters);
   }
   return nodeViewProducer;
 }

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

@@ -13,7 +13,7 @@ import withAnalyticsContext from '@atlaskit/analytics-next/withAnalyticsContext'
 import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "102.13.2";
+const packageVersion = "102.13.4";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/esm/analytics/types/enums.js

@@ -216,6 +216,7 @@ export var TRIGGER_METHOD = /*#__PURE__*/function (TRIGGER_METHOD) {
   TRIGGER_METHOD["KEYBOARD"] = "keyboard";
   TRIGGER_METHOD["SHORTCUT"] = "shortcut";
   TRIGGER_METHOD["TOOLBAR"] = "toolbar";
+  TRIGGER_METHOD["EXTERNAL"] = "external";
   return TRIGGER_METHOD;
 }({});
 export var ACTION_SUBJECT = /*#__PURE__*/function (ACTION_SUBJECT) {

package/dist/esm/extensibility/Extension/Extension/index.js

@@ -9,13 +9,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import React, { Fragment, useEffect } from 'react';
+import React, { Fragment } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 import classnames from 'classnames';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { useSharedPluginState } from '../../../hooks';
 import { overflowShadow } from '../../../ui';
 import { calculateBreakoutStyles } from '../../../utils';
@@ -118,30 +117,6 @@ function ExtensionWithPluginState(props) {
       setIsNodeHovered(didHover);
     }
   };
-  var shouldFireNbmExperimentExposure = React.useMemo(function () {
-    if (node.type.name === 'extension' && typeof getPos === 'function') {
-      var pos = getPos();
-      if (!isNaN(pos)) {
-        var _view$state$doc$resol;
-        var parentNameType = (_view$state$doc$resol = view.state.doc.resolve(pos).parent) === null || _view$state$doc$resol === void 0 || (_view$state$doc$resol = _view$state$doc$resol.type) === null || _view$state$doc$resol === void 0 ? void 0 : _view$state$doc$resol.name;
-        if (['listItem', 'nestedExpand', 'blockquote', 'panel'].includes(parentNameType)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  }, [node, getPos, view]);
-  useEffect(function () {
-    if (shouldFireNbmExperimentExposure) {
-      // No-op editorExperiment evaluation to track usage of nested non-bodied macros
-      // these can't be tracked at the point of diversion of the experience because that is a toggle of the
-      // ProseMirror schema nodes for listItems, nestedExpand, blockquote, and panel. At that point the customer
-      // has not yet been exposed
-      editorExperiment('platform_editor_nested_non_bodied_macros', 'test', {
-        exposure: true
-      });
-    }
-  }, [shouldFireNbmExperimentExposure]);
   return jsx(Fragment, null, showMacroInteractionDesignUpdates && !isLivePageViewMode && jsx(ExtensionLozenge, {
     isNodeSelected: isNodeSelected,
     isNodeHovered: isNodeHovered,

package/dist/esm/messages/link-toolbar.js

@@ -60,6 +60,11 @@ export var linkToolbarMessages = defineMessages({
     defaultMessage: 'Go to Link Preferences',
     description: 'Go to Link Preferences'
   },
+  preferencesLink: {
+    id: 'fabric.editor.preferencesLink',
+    defaultMessage: 'Link preferences',
+    description: 'Go to link preferences'
+  },
   editDatasource: {
     id: 'fabric.editor.edit.datasource',
     defaultMessage: 'Edit search query',

package/dist/esm/monitoring/error.js

@@ -7,7 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { isFedRamp } from './environment';
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "102.13.2";
+var packageVersion = "102.13.4";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007