@atlaskit/editor-common 74.5.1 → 74.6.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 74.6.0
+
+### Minor Changes
+
+- [`f07a1e036a9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f07a1e036a9) - Refactoring editor-core to prepare for extracting card plugin.
+
+## 74.5.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 74.5.1
 
 ### Patch Changes

package/dist/cjs/analytics/index.js

@@ -231,6 +231,24 @@ Object.defineProperty(exports, "USER_CONTEXT", {
     return _types.USER_CONTEXT;
   }
 });
+Object.defineProperty(exports, "buildEditLinkPayload", {
+  enumerable: true,
+  get: function get() {
+    return _linkingUtils.buildEditLinkPayload;
+  }
+});
+Object.defineProperty(exports, "buildOpenedSettingsPayload", {
+  enumerable: true,
+  get: function get() {
+    return _linkingUtils.buildOpenedSettingsPayload;
+  }
+});
+Object.defineProperty(exports, "buildVisitedLinkPayload", {
+  enumerable: true,
+  get: function get() {
+    return _linkingUtils.buildVisitedLinkPayload;
+  }
+});
 Object.defineProperty(exports, "fireAnalyticsEvent", {
   enumerable: true,
   get: function get() {
@@ -243,6 +261,13 @@ Object.defineProperty(exports, "getAnalyticsEventsFromTransaction", {
     return _utils.getAnalyticsEventsFromTransaction;
   }
 });
+Object.defineProperty(exports, "unlinkPayload", {
+  enumerable: true,
+  get: function get() {
+    return _linkingUtils.unlinkPayload;
+  }
+});
 var _types = require("./types");
 var _fireAnalyticsEvent = require("./fire-analytics-event");
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _linkingUtils = require("./linking-utils");

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

@@ -0,0 +1,84 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.unlinkPayload = exports.buildVisitedLinkPayload = exports.buildOpenedSettingsPayload = exports.buildEditLinkPayload = void 0;
+var _types = require("./types");
+var buildEditLinkPayload = function buildEditLinkPayload(type) {
+  return {
+    action: _types.ACTION.CLICKED,
+    actionSubject: type === _types.ACTION_SUBJECT_ID.HYPERLINK ? _types.ACTION_SUBJECT.HYPERLINK : _types.ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: _types.ACTION_SUBJECT_ID.EDIT_LINK,
+    attributes: type !== _types.ACTION_SUBJECT_ID.HYPERLINK ? {
+      display: type
+    } : {},
+    eventType: _types.EVENT_TYPE.UI
+  };
+};
+exports.buildEditLinkPayload = buildEditLinkPayload;
+var mapLinkTypeToCardAppearance = function mapLinkTypeToCardAppearance(type) {
+  switch (type) {
+    case _types.ACTION_SUBJECT_ID.CARD_INLINE:
+      {
+        return 'inline';
+      }
+    case _types.ACTION_SUBJECT_ID.CARD_BLOCK:
+      {
+        return 'block';
+      }
+    case _types.ACTION_SUBJECT_ID.EMBEDS:
+      {
+        return 'embed';
+      }
+    default:
+      {
+        return 'url';
+      }
+  }
+};
+var buildVisitedLinkPayload = function buildVisitedLinkPayload(type) {
+  return type === _types.ACTION_SUBJECT_ID.HYPERLINK ? {
+    action: _types.ACTION.VISITED,
+    actionSubject: _types.ACTION_SUBJECT.HYPERLINK,
+    actionSubjectId: undefined,
+    attributes: {
+      inputMethod: _types.INPUT_METHOD.TOOLBAR
+    },
+    eventType: _types.EVENT_TYPE.TRACK
+  } : {
+    action: _types.ACTION.VISITED,
+    actionSubject: _types.ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type,
+    attributes: {
+      inputMethod: _types.INPUT_METHOD.TOOLBAR
+    },
+    eventType: _types.EVENT_TYPE.TRACK
+  };
+};
+exports.buildVisitedLinkPayload = buildVisitedLinkPayload;
+var buildOpenedSettingsPayload = function buildOpenedSettingsPayload(type) {
+  return {
+    action: _types.ACTION.CLICKED,
+    actionSubject: _types.ACTION_SUBJECT.BUTTON,
+    actionSubjectId: _types.ACTION_SUBJECT_ID.GOTO_SMART_LINK_SETTINGS,
+    attributes: {
+      inputMethod: _types.INPUT_METHOD.TOOLBAR,
+      display: mapLinkTypeToCardAppearance(type)
+    },
+    eventType: _types.EVENT_TYPE.UI
+  };
+};
+exports.buildOpenedSettingsPayload = buildOpenedSettingsPayload;
+var unlinkPayload = function unlinkPayload(type) {
+  return {
+    action: _types.ACTION.UNLINK,
+    actionSubject: type === _types.ACTION_SUBJECT_ID.HYPERLINK ? _types.ACTION_SUBJECT.HYPERLINK : _types.ACTION_SUBJECT.SMART_LINK,
+    actionSubjectId: type === _types.ACTION_SUBJECT_ID.HYPERLINK ? undefined : type,
+    attributes: {
+      inputMethod: _types.INPUT_METHOD.TOOLBAR
+    },
+    eventType: _types.EVENT_TYPE.TRACK
+  };
+};
+exports.unlinkPayload = unlinkPayload;

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

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _prosemirrorState = require("prosemirror-state");
+var _prosemirrorUtils = require("prosemirror-utils");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _alignImageCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-center"));
+var _alignImageLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-left"));
+var _alignImageRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-image-right"));
+var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
+var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
+var _mediaWrapLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-left"));
+var _mediaWrapRight = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wrap-right"));
+var _analytics = require("../../analytics");
+var _coreUtils = require("../../core-utils");
+var _messages = _interopRequireWildcard(require("../../messages"));
+var _utils = require("../../utils");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+// 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: _alignImageLeft.default
+}, {
+  id: 'editor.media.alignCenter',
+  value: 'center',
+  icon: _alignImageCenter.default
+}, {
+  id: 'editor.media.alignRight',
+  value: 'align-end',
+  icon: _alignImageRight.default
+}];
+var wrappingIcons = [{
+  id: 'editor.media.wrapLeft',
+  value: 'wrap-left',
+  icon: _mediaWrapLeft.default
+}, {
+  id: 'editor.media.wrapRight',
+  value: 'wrap-right',
+  icon: _mediaWrapRight.default
+}];
+var breakoutIcons = [{
+  value: 'wide',
+  icon: _mediaWide.default
+}, {
+  value: 'full-width',
+  icon: _mediaFullWidth.default
+}];
+var layoutToMessages = {
+  'wrap-left': _messages.mediaAndEmbedToolbarMessages.wrapLeft,
+  center: _messages.default.alignImageCenter,
+  'wrap-right': _messages.mediaAndEmbedToolbarMessages.wrapRight,
+  wide: _messages.default.layoutWide,
+  'full-width': _messages.default.layoutFullWidth,
+  'align-end': _messages.default.alignImageRight,
+  'align-start': _messages.default.alignImageLeft
+};
+var getNodeWidth = function getNodeWidth(node, schema) {
+  var embedCard = schema.nodes.embedCard;
+  if (node.type === embedCard) {
+    return node.attrs.originalWidth || _editorSharedStyles.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 = (0, _utils.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(_prosemirrorState.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) && ((0, _coreUtils.insideTable)(state) || (0, _utils.isInLayoutColumn)(state))) {
+      tr.insert(state.selection.to, paragraph.createAndFill());
+    }
+    analyticsApi === null || analyticsApi === void 0 ? void 0 : analyticsApi.attachAnalyticsEvent({
+      eventType: _analytics.EVENT_TYPE.TRACK,
+      action: _analytics.ACTION.SELECTED,
+      actionSubject: _analytics.ACTION_SUBJECT[node.type === mediaSingle ? 'MEDIA_SINGLE' : 'EMBEDS'],
+      actionSubjectId: _analytics.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 (0, _prosemirrorUtils.hasParentNodeOfType)([nodes.bodiedExtension, nodes.listItem, nodes.expand, nodes.nestedExpand].concat((0, _toConsumableArray2.default)(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 _prosemirrorState.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((0, _toConsumableArray2.default)(alignmentToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBetweenAlignmentAndWrapping(allowAlignment, allowWrapping)), (0, _toConsumableArray2.default)(wrappingToolbarItems), (0, _toConsumableArray2.default)(getSeparatorBeforeBreakoutItems(allowAlignment, allowWrapping, allowResizing)), (0, _toConsumableArray2.default)(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'
+  }] : [];
+};
+var _default = buildLayoutButtons;
+exports.default = _default;

package/dist/cjs/card/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,6 +10,12 @@ Object.defineProperty(exports, "addLinkMetadata", {
     return _utils.addLinkMetadata;
   }
 });
+Object.defineProperty(exports, "buildLayoutButtons", {
+  enumerable: true,
+  get: function get() {
+    return _MediaAndEmbedsToolbar.default;
+  }
+});
 Object.defineProperty(exports, "commandWithMetadata", {
   enumerable: true,
   get: function get() {
@@ -21,4 +28,5 @@ Object.defineProperty(exports, "getLinkMetadataFromTransaction", {
     return _utils.getLinkMetadataFromTransaction;
   }
 });
-var _utils = require("./utils");
+var _utils = require("./utils");
+var _MediaAndEmbedsToolbar = _interopRequireDefault(require("./MediaAndEmbedsToolbar"));

package/dist/cjs/messages/index.js

@@ -22,6 +22,18 @@ Object.defineProperty(exports, "linkMessages", {
     return _link.linkMessages;
   }
 });
+Object.defineProperty(exports, "linkToolbarMessages", {
+  enumerable: true,
+  get: function get() {
+    return _linkToolbar.linkToolbarMessages;
+  }
+});
+Object.defineProperty(exports, "mediaAndEmbedToolbarMessages", {
+  enumerable: true,
+  get: function get() {
+    return _mediaAndEmbedToolbar.toolbarMessages;
+  }
+});
 Object.defineProperty(exports, "toolbarInsertBlockMessages", {
   enumerable: true,
   get: function get() {
@@ -37,9 +49,11 @@ Object.defineProperty(exports, "unsupportedContentMessages", {
 var _reactIntlNext = require("react-intl-next");
 var _codeBidiWarning = require("./codeBidiWarning");
 var _link = require("./link");
+var _linkToolbar = require("./link-toolbar");
 var _unsupportedContent = require("./unsupportedContent");
 var _codeBlockButton = require("./codeBlockButton");
 var _insertBlock = require("./insert-block");
+var _mediaAndEmbedToolbar = require("./media-and-embed-toolbar");
 var _default = (0, _reactIntlNext.defineMessages)({
   layoutFixedWidth: {
     id: 'fabric.editor.layoutFixedWidth',

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

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.linkToolbarMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var linkToolbarMessages = (0, _reactIntlNext.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'
+  }
+});
+exports.linkToolbarMessages = linkToolbarMessages;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.toolbarMessages = void 0;
+var _reactIntlNext = require("react-intl-next");
+var toolbarMessages = (0, _reactIntlNext.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.'
+  }
+});
+exports.toolbarMessages = toolbarMessages;

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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.1";
+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/cjs/react-node-view/getInlineNodeViewProducer.js

@@ -0,0 +1,225 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getInlineNodeViewProducer = getInlineNodeViewProducer;
+exports.inlineNodeViewClassname = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _analytics = require("../analytics");
+var _ErrorBoundary = require("../ui/ErrorBoundary");
+var _utils = require("../utils");
+/** @jsx jsx */
+
+var inlineNodeViewClassname = 'inlineNodeView';
+exports.inlineNodeViewClassname = inlineNodeViewClassname;
+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(_utils.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 = (0, _utils.getPerformanceOptions)(nodeViewParams.view),
+    samplingRate = _getPerformanceOption.samplingRate,
+    slowThreshold = _getPerformanceOption.slowThreshold,
+    trackingEnabled = _getPerformanceOption.trackingEnabled;
+  trackingEnabled && (0, _utils.startMeasureReactNodeViewRendered)({
+    nodeTypeName: currentNode.type.name
+  });
+
+  // We render the component while creating the node view
+  renderComponent();
+  trackingEnabled && (0, _utils.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 (0, _react2.jsx)(_ErrorBoundary.ErrorBoundary, {
+      component: _analytics.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 : _analytics.ACTION_SUBJECT_ID.UNKNOWN_NODE,
+      dispatchAnalyticsEvent: dispatchAnalyticsEvent
+    }, (0, _react2.jsx)("span", {
+      "aria-hidden": "true",
+      className: "zeroWidthSpaceContainer"
+    }, (0, _react2.jsx)("span", {
+      className: "".concat(inlineNodeViewClassname, "AddZeroWidthSpace")
+    }), _utils.ZERO_WIDTH_SPACE), (0, _react2.jsx)(Component, (0, _extends2.default)({
+      view: nodeViewParams.view,
+      getPos: nodeViewParams.getPos,
+      node: currentNode
+    }, extraComponentProps)), (0, _react2.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.
+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;
+}