@atlaskit/editor-common 74.5.2 → 74.6.0

package/dist/esm/analytics/index.js

@@ -1,3 +1,4 @@
 export { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, BROWSER_FREEZE_INTERACTION_TYPE, CONTENT_COMPONENT, DELETE_DIRECTION, EVENT_TYPE, FLOATING_CONTROLS_TITLE, FULL_WIDTH_MODE, GAP_CURSOR_POSITION, INDENT_DIRECTION, INDENT_TYPE, INPUT_METHOD, LAYOUT_TYPE, LINK_REPRESENTATION, LINK_RESOURCE, LINK_STATUS, LIST_TEXT_SCENARIOS, JOIN_SCENARIOS_WHEN_TYPING_TO_INSERT_LIST, OUTDENT_SCENARIOS, MODE, PLATFORMS, PUNC, PasteContents, PasteSources, PasteTypes, RESOLVE_METHOD, SELECTION_TYPE, SELECTION_POSITION, SMART_LINK_TYPE, SYMBOL, SmartLinkNodeContexts, TABLE_ACTION, TABLE_BREAKOUT, TARGET_SELECTION_SOURCE, TOOLBAR_ACTION_SUBJECT_ID, TRIGGER_METHOD, USER_CONTEXT } from './types';
 export { fireAnalyticsEvent } from './fire-analytics-event';
-export { getAnalyticsEventsFromTransaction } from './utils';
+export { getAnalyticsEventsFromTransaction } from './utils';
+export { buildEditLinkPayload, buildVisitedLinkPayload, buildOpenedSettingsPayload, unlinkPayload } from './linking-utils';

package/dist/esm/analytics/linking-utils.js

@@ -0,0 +1,74 @@
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD } from './types';
+export var buildEditLinkPayload = function buildEditLinkPayload(type) {
+  return {
+    action: ACTION.CLICKED,
+    actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: ACTION_SUBJECT_ID.EDIT_LINK,
+    attributes: type !== ACTION_SUBJECT_ID.HYPERLINK ? {
+      display: type
+    } : {},
+    eventType: EVENT_TYPE.UI
+  };
+};
+var mapLinkTypeToCardAppearance = function mapLinkTypeToCardAppearance(type) {
+  switch (type) {
+    case ACTION_SUBJECT_ID.CARD_INLINE:
+      {
+        return 'inline';
+      }
+    case ACTION_SUBJECT_ID.CARD_BLOCK:
+      {
+        return 'block';
+      }
+    case ACTION_SUBJECT_ID.EMBEDS:
+      {
+        return 'embed';
+      }
+    default:
+      {
+        return 'url';
+      }
+  }
+};
+export var buildVisitedLinkPayload = function buildVisitedLinkPayload(type) {
+  return type === ACTION_SUBJECT_ID.HYPERLINK ? {
+    action: ACTION.VISITED,
+    actionSubject: ACTION_SUBJECT.HYPERLINK,
+    actionSubjectId: undefined,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  } : {
+    action: ACTION.VISITED,
+    actionSubject: ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};
+export var buildOpenedSettingsPayload = function buildOpenedSettingsPayload(type) {
+  return {
+    action: ACTION.CLICKED,
+    actionSubject: ACTION_SUBJECT.BUTTON,
+    actionSubjectId: ACTION_SUBJECT_ID.GOTO_SMART_LINK_SETTINGS,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR,
+      display: mapLinkTypeToCardAppearance(type)
+    },
+    eventType: EVENT_TYPE.UI
+  };
+};
+export var unlinkPayload = function unlinkPayload(type) {
+  return {
+    action: ACTION.UNLINK,
+    actionSubject: type === ACTION_SUBJECT_ID.HYPERLINK ? ACTION_SUBJECT.HYPERLINK : ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type === ACTION_SUBJECT_ID.HYPERLINK ? undefined : type,
+    attributes: {
+      inputMethod: INPUT_METHOD.TOOLBAR
+    },
+    eventType: EVENT_TYPE.TRACK
+  };
+};

package/dist/esm/card/MediaAndEmbedsToolbar/index.js

@@ -0,0 +1,146 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { NodeSelection } from 'prosemirror-state';
+import { hasParentNodeOfType } from 'prosemirror-utils';
+import { DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import EditorAlignImageCenter from '@atlaskit/icon/glyph/editor/align-image-center';
+import EditorAlignImageLeft from '@atlaskit/icon/glyph/editor/align-image-left';
+import EditorAlignImageRight from '@atlaskit/icon/glyph/editor/align-image-right';
+import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
+import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
+import WrapLeftIcon from '@atlaskit/icon/glyph/editor/media-wrap-left';
+import WrapRightIcon from '@atlaskit/icon/glyph/editor/media-wrap-right';
+import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '../../analytics';
+import { insideTable } from '../../core-utils';
+import commonMessages, { mediaAndEmbedToolbarMessages as toolbarMessages } from '../../messages';
+import { alignAttributes, isInLayoutColumn } from '../../utils';
+
+// Workaround as we don't want to import this package into `editor-common`
+// We'll get type errors if this gets out of sync with `editor-plugin-width`.
+var alignmentIcons = [{
+  id: 'editor.media.alignLeft',
+  value: 'align-start',
+  icon: EditorAlignImageLeft
+}, {
+  id: 'editor.media.alignCenter',
+  value: 'center',
+  icon: EditorAlignImageCenter
+}, {
+  id: 'editor.media.alignRight',
+  value: 'align-end',
+  icon: EditorAlignImageRight
+}];
+var wrappingIcons = [{
+  id: 'editor.media.wrapLeft',
+  value: 'wrap-left',
+  icon: WrapLeftIcon
+}, {
+  id: 'editor.media.wrapRight',
+  value: 'wrap-right',
+  icon: WrapRightIcon
+}];
+var breakoutIcons = [{
+  value: 'wide',
+  icon: WideIcon
+}, {
+  value: 'full-width',
+  icon: FullWidthIcon
+}];
+var layoutToMessages = {
+  'wrap-left': toolbarMessages.wrapLeft,
+  center: commonMessages.alignImageCenter,
+  'wrap-right': toolbarMessages.wrapRight,
+  wide: commonMessages.layoutWide,
+  'full-width': commonMessages.layoutFullWidth,
+  'align-end': commonMessages.alignImageRight,
+  'align-start': commonMessages.alignImageLeft
+};
+var getNodeWidth = function getNodeWidth(node, schema) {
+  var embedCard = schema.nodes.embedCard;
+  if (node.type === embedCard) {
+    return node.attrs.originalWidth || DEFAULT_EMBED_CARD_WIDTH;
+  }
+  return node.firstChild && node.firstChild.attrs.width || node.attrs.width;
+};
+var makeAlign = function makeAlign(layout, nodeType, widthPluginDependencyApi, analyticsApi) {
+  return function (state, dispatch) {
+    var _ref = state.selection,
+      node = _ref.node;
+    var previousLayoutType = node.attrs.layout;
+    var mediaSingle = state.schema.nodes.mediaSingle;
+    if (!dispatch) {
+      return false;
+    }
+    var widthPluginState = widthPluginDependencyApi === null || widthPluginDependencyApi === void 0 ? void 0 : widthPluginDependencyApi.sharedState.currentState();
+    if (!node || node.type !== nodeType || !widthPluginState) {
+      return false;
+    }
+    var nodeWidth = getNodeWidth(node, state.schema);
+    var newAttrs = alignAttributes(layout, node.attrs, undefined, nodeWidth, widthPluginState.lineLength);
+    var tr = state.tr.setNodeMarkup(state.selection.from, undefined, newAttrs);
+    tr.setMeta('scrollIntoView', false);
+    // when image captions are enabled, the wrong node gets selected after
+    // setNodeMarkup is called
+    tr.setSelection(NodeSelection.create(tr.doc, state.selection.from));
+    var paragraph = tr.doc.type.schema.nodes.paragraph;
+
+    // see https://product-fabric.atlassian.net/browse/ED-15518 insert a new paragraph when an embedded card is wrapped left or right
+    if (layout.startsWith('wrap') && paragraph && !tr.doc.nodeAt(state.selection.to) && (insideTable(state) || isInLayoutColumn(state))) {
+      tr.insert(state.selection.to, paragraph.createAndFill());
+    }
+    analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
+      eventType: EVENT_TYPE.TRACK,
+      action: ACTION.SELECTED,
+      actionSubject: ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
+      actionSubjectId: ACTION_SUBJECT_ID.RICH_MEDIA_LAYOUT,
+      attributes: {
+        previousLayoutType: previousLayoutType,
+        currentLayoutType: layout
+      }
+    })(tr);
+    dispatch(tr);
+    return true;
+  };
+};
+var mapIconsToToolbarItem = function mapIconsToToolbarItem(icons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) {
+  return icons.map(function (toolbarItem) {
+    var id = toolbarItem.id,
+      value = toolbarItem.value;
+    return {
+      id: id,
+      type: 'button',
+      icon: toolbarItem.icon,
+      title: intl.formatMessage(layoutToMessages[value]),
+      selected: layout === value,
+      onClick: makeAlign(value, nodeType, widthPluginDependencyApi, analyticsApi)
+    };
+  });
+};
+var shouldHideLayoutToolbar = function shouldHideLayoutToolbar(selection, _ref2, allowResizingInTables) {
+  var nodes = _ref2.nodes;
+  return hasParentNodeOfType([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat(_toConsumableArray(allowResizingInTables ? [] : [nodes.table])).filter(Boolean))(selection);
+};
+var buildLayoutButtons = function buildLayoutButtons(state, intl, nodeType, widthPluginDependencyApi, analyticsApi, allowResizing, allowResizingInTables) {
+  var allowWrapping = arguments.length > 7 && arguments[7] !== undefined ? arguments[7] : true;
+  var allowAlignment = arguments.length > 8 && arguments[8] !== undefined ? arguments[8] : true;
+  var selection = state.selection;
+  if (!(selection instanceof NodeSelection) || !selection.node || !nodeType || shouldHideLayoutToolbar(selection, state.schema, allowResizingInTables)) {
+    return [];
+  }
+  var layout = selection.node.attrs.layout;
+  var alignmentToolbarItems = allowAlignment ? mapIconsToToolbarItem(alignmentIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var wrappingToolbarItems = allowWrapping ? mapIconsToToolbarItem(wrappingIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var breakOutToolbarItems = !allowResizing ? mapIconsToToolbarItem(breakoutIcons, layout, intl, nodeType, widthPluginDependencyApi, analyticsApi) : [];
+  var items = [].concat(_toConsumableArray(alignmentToolbarItems), _toConsumableArray(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), _toConsumableArray(wrappingToolbarItems), _toConsumableArray(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), _toConsumableArray(breakOutToolbarItems));
+  return items;
+};
+var getSeparatorBetweenAlignmentAndWrapping = function getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping) {
+  return allowAlignment && allowWrapping ? [{
+    type: 'separator'
+  }] : [];
+};
+var getSeparatorBeforeBreakoutItems = function getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing) {
+  return !allowResizing && (allowAlignment || allowWrapping) ? [{
+    type: 'separator'
+  }] : [];
+};
+export default buildLayoutButtons;

package/dist/esm/card/index.js

@@ -1 +1,2 @@
-export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
+export { addLinkMetadata, getLinkMetadataFromTransaction, commandWithMetadata } from './utils';
+export { default as buildLayoutButtons } from './MediaAndEmbedsToolbar';

package/dist/esm/messages/index.js

@@ -1,9 +1,11 @@
 import { defineMessages } from 'react-intl-next';
 export { codeBidiWarningMessages } from './codeBidiWarning';
 export { linkMessages } from './link';
+export { linkToolbarMessages } from './link-toolbar';
 export { unsupportedContentMessages } from './unsupportedContent';
 export { codeBlockButtonMessages } from './codeBlockButton';
 export { toolbarInsertBlockMessages } from './insert-block';
+export { toolbarMessages as mediaAndEmbedToolbarMessages } from './media-and-embed-toolbar';
 export default defineMessages({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

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

@@ -0,0 +1,53 @@
+import { defineMessages } from 'react-intl-next';
+export var linkToolbarMessages = defineMessages({
+  addLink: {
+    id: 'fabric.editor.mediaAddLink',
+    defaultMessage: 'Add link',
+    description: 'Add link'
+  },
+  unableToOpenLink: {
+    id: 'fabric.editor.unableToOpenLink',
+    defaultMessage: 'Unable to open this link',
+    description: 'Unable to open this link'
+  },
+  unlink: {
+    id: 'fabric.editor.unlink',
+    defaultMessage: 'Unlink',
+    description: 'Removes the hyperlink but keeps your text.'
+  },
+  editLink: {
+    id: 'fabric.editor.editLink',
+    defaultMessage: 'Edit link',
+    description: 'Edit the link, update display text'
+  },
+  placeholder: {
+    id: 'fabric.editor.hyperlinkToolbarPlaceholder',
+    defaultMessage: 'Paste or search for link',
+    description: 'Paste or search for link'
+  },
+  linkPlaceholder: {
+    id: 'fabric.editor.linkPlaceholder',
+    defaultMessage: 'Paste link',
+    description: 'Create a new link by pasting a URL.'
+  },
+  linkAddress: {
+    id: 'fabric.editor.linkAddress',
+    defaultMessage: 'Link address',
+    description: 'Insert the address of the link'
+  },
+  invalidLink: {
+    id: 'fabric.editor.invalidLink',
+    defaultMessage: 'Please enter a valid link.',
+    description: 'Please enter a valid link.'
+  },
+  emptyLink: {
+    id: 'fabric.editor.emptyLink',
+    defaultMessage: 'Please enter a link.',
+    description: 'Please enter a link.'
+  },
+  settingsLink: {
+    id: 'fabric.editor.settingsLinks',
+    defaultMessage: 'Go to Link Preferences',
+    description: 'Go to Link Preferences'
+  }
+});

package/dist/esm/messages/media-and-embed-toolbar.js

@@ -0,0 +1,13 @@
+import { defineMessages } from 'react-intl-next';
+export var toolbarMessages = defineMessages({
+  wrapLeft: {
+    id: 'fabric.editor.wrapLeft',
+    defaultMessage: 'Wrap left',
+    description: 'Aligns your image to the left and wraps text around it.'
+  },
+  wrapRight: {
+    id: 'fabric.editor.wrapRight',
+    defaultMessage: 'Wrap right',
+    description: 'Aligns your image to the right and wraps text around it.'
+  }
+});

package/dist/esm/monitoring/error.js

@@ -6,7 +6,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 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 = "74.5.2";
+var packageVersion = "74.6.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

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

@@ -0,0 +1,215 @@
+import _extends from "@babel/runtime/helpers/extends";
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { ACTION_SUBJECT, ACTION_SUBJECT_ID } from '../analytics';
+import { ErrorBoundary } from '../ui/ErrorBoundary';
+import { analyticsEventKey, getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered, ZERO_WIDTH_SPACE } from '../utils';
+export var inlineNodeViewClassname = 'inlineNodeView';
+function createNodeView(_ref) {
+  var nodeViewParams = _ref.nodeViewParams,
+    pmPluginFactoryParams = _ref.pmPluginFactoryParams,
+    Component = _ref.Component,
+    extraComponentProps = _ref.extraComponentProps;
+  // We set a variable for the current node which is
+  // used for comparisions when doing updates, before being
+  // overwritten to the updated node.
+  var currentNode = nodeViewParams.node;
+
+  // 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.
+
+  var domRef = document.createElement('span');
+  domRef.contentEditable = 'false';
+  setDomAttrs(nodeViewParams.node, domRef);
+
+  // @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("".concat(nodeViewParams.node.type.name, "View-content-wrap"), "".concat(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: payload
+    });
+  }
+
+  // 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: dispatchAnalyticsEvent,
+      currentNode: currentNode,
+      nodeViewParams: nodeViewParams,
+      Component: Component,
+      extraComponentProps: extraComponentProps
+    }), domRef, false,
+    // node views should be rendered with intl context
+    true);
+  }
+  var _getPerformanceOption = getPerformanceOptions(nodeViewParams.view),
+    samplingRate = _getPerformanceOption.samplingRate,
+    slowThreshold = _getPerformanceOption.slowThreshold,
+    trackingEnabled = _getPerformanceOption.trackingEnabled;
+  trackingEnabled && startMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name
+  });
+
+  // We render the component while creating the node view
+  renderComponent();
+  trackingEnabled && stopMeasureReactNodeViewRendered({
+    nodeTypeName: currentNode.type.name,
+    dispatchAnalyticsEvent: dispatchAnalyticsEvent,
+    editorState: nodeViewParams.view.state,
+    samplingRate: samplingRate,
+    slowThreshold: slowThreshold
+  });
+
+  // https://prosemirror.net/docs/ref/#view.NodeView
+  var nodeView = {
+    get dom() {
+      return domRef;
+    },
+    update: function 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: function 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(domRef);
+      // @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;
+    }
+  };
+  return nodeView;
+}
+
+/**
+ * Copies the attributes from a ProseMirror Node to a DOM node.
+ * @param node The Prosemirror Node from which to source the attributes
+ */
+function setDomAttrs(node, element) {
+  Object.keys(node.attrs || {}).forEach(function (attr) {
+    element.setAttribute(attr, node.attrs[attr]);
+  });
+}
+function getPortalChildren(_ref2) {
+  var dispatchAnalyticsEvent = _ref2.dispatchAnalyticsEvent,
+    currentNode = _ref2.currentNode,
+    nodeViewParams = _ref2.nodeViewParams,
+    Component = _ref2.Component,
+    extraComponentProps = _ref2.extraComponentProps;
+  return function portalChildren() {
+    var _currentNode$type$nam, _currentNode$type;
+    //  All inline nodes use `display: inline` to allow for multi-line
+    //  wrapping. This does produce an issue in Chrome where it is not
+    //  possible to click select the position after the node,
+    //  see: https://product-fabric.atlassian.net/browse/ED-12003
+    //  however this is only a problem for node views that use
+    //  `display: inline-block` somewhere within the Component.
+    //  Looking at the below structure, spans with className
+    //  `inlineNodeViewAddZeroWidthSpace` have pseudo elements that
+    //  add a zero width space which fixes the problem.
+    //  Without the additional zero width space before the Component,
+    //  it is not possible to use the keyboard to range select in Safari.
+    //
+    //  Zero width spaces on either side of the Component also prevent
+    //  the cursor from appearing inside the node view on all browsers.
+    //
+    //  Note:
+    //  In future it is worth considering prohibiting the use of `display: inline-block`
+    //  within inline node view Components however would require a sizable
+    //  refactor. A test suite to catch any instances of this is ideal however
+    //  the refactor required is currently out of scope for https://product-fabric.atlassian.net/browse/ED-14176
+
+    return jsx(ErrorBoundary, {
+      component: ACTION_SUBJECT.REACT_NODE_VIEW,
+      componentId: (_currentNode$type$nam = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$type = currentNode.type) === null || _currentNode$type === void 0 ? void 0 : _currentNode$type.name) !== null && _currentNode$type$nam !== void 0 ? _currentNode$type$nam : ACTION_SUBJECT_ID.UNKNOWN_NODE,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }, jsx("span", {
+      "aria-hidden": "true",
+      className: "zeroWidthSpaceContainer"
+    }, jsx("span", {
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
+    }), ZERO_WIDTH_SPACE), jsx(Component, _extends({
+      view: nodeViewParams.view,
+      getPos: nodeViewParams.getPos,
+      node: currentNode
+    }, extraComponentProps)), jsx("span", {
+      "aria-hidden": "true",
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
+    }));
+  };
+}
+
+// https://prosemirror.net/docs/ref/#view.EditorProps.nodeViews
+// The prosemirror EditorProps has a nodeViews key which has the rough shape:
+// type nodeViews: {
+//   [nodeViewName: string]: (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// }
+// So the value of the keys on the nodeViews object, are a function which should return a NodeView.
+// The following type NodeViewProducer, refers to these functions which return a NodeView.
+//
+// So the above type could also be described as
+// type NodeViewProducer = (node, editorView, getPos, decorations, innerDecorations) => NodeView
+// nodeViews: {
+//   [nodeViewName: string]: NodeViewProducer
+// }
+// This return of this function is intended to be the value of a key
+// in a ProseMirror nodeViews object.
+export function getInlineNodeViewProducer(_ref3) {
+  var pmPluginFactoryParams = _ref3.pmPluginFactoryParams,
+    Component = _ref3.Component,
+    extraComponentProps = _ref3.extraComponentProps;
+  function nodeViewProducer() {
+    var nodeView = createNodeView({
+      nodeViewParams: {
+        node: arguments.length <= 0 ? undefined : arguments[0],
+        view: arguments.length <= 1 ? undefined : arguments[1],
+        getPos: arguments.length <= 2 ? undefined : arguments[2],
+        decorations: arguments.length <= 3 ? undefined : arguments[3]
+      },
+      pmPluginFactoryParams: pmPluginFactoryParams,
+      Component: Component,
+      extraComponentProps: extraComponentProps
+    });
+    return nodeView;
+  }
+  return nodeViewProducer;
+}

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

@@ -8,6 +8,7 @@ import { createDispatch } from '../event-dispatcher';
 import { ErrorBoundary } from '../ui/ErrorBoundary';
 import { getPerformanceOptions, startMeasureReactNodeViewRendered, stopMeasureReactNodeViewRendered } from '../utils';
 import { analyticsEventKey } from '../utils/analytics';
+export { getInlineNodeViewProducer, inlineNodeViewClassname } from './getInlineNodeViewProducer';
 var ReactNodeView = /*#__PURE__*/function () {
   function ReactNodeView(_node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, reactComponent) {
     var _this = this;

package/dist/esm/{ui/Resizer/index.js → resizer/Resizer.js}

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import classnames from 'classnames';
 import { Resizable } from 're-resizable';
-import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../../styles/shared/resizer';
+import { resizerHandleLeftClassName, resizerHandlePadding, resizerHandlerClassName, resizerHandleRightClassName, resizerHandleStickyClassName, resizerHandleZIndex, resizerItemClassName } from '../styles/shared/resizer';
 export default function ResizerNext(props) {
   var _classnames, _classnames2;
   var resizable = React.useRef(null);

package/dist/esm/resizer/index.js

@@ -0,0 +1 @@
+export { default as ResizerNext } from './Resizer';

package/dist/esm/resizer/types.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/resizer/utils.js

@@ -0,0 +1,12 @@
+export var snapTo = function snapTo(target, points) {
+  return points.length === 0 ?
+  // extreme last case if there are no points somehow
+  target : points.reduce(function (point, closest) {
+    return Math.abs(closest - target) < Math.abs(point - target) ? closest : point;
+  });
+};
+export var handleSides = ['left', 'right'];
+export var imageAlignmentMap = {
+  left: 'start',
+  right: 'end'
+};

package/dist/esm/types/hyperlink.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/types/resizable-media-single.js

@@ -0,0 +1 @@
+export {};

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

@@ -18,7 +18,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "74.5.2";
+var packageVersion = "74.6.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/esm/ui/LinkSearch/const.js

@@ -0,0 +1,4 @@
+export var RECENT_SEARCH_WIDTH_IN_PX = 420;
+export var RECENT_SEARCH_WIDTH_WITHOUT_ITEMS_IN_PX = 360;
+export var RECENT_SEARCH_HEIGHT_IN_PX = 360;
+export var LINKPICKER_HEIGHT_IN_PX = 570;