@atlaskit/renderer 112.6.11 → 112.6.13

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/renderer
 
+## 112.6.13
+
+### Patch Changes
+
+- [#156429](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/156429)
+  [`01453825d9537`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/01453825d9537) -
+  added renderer functional component behind FF as part of React18 upgrade
+
+## 112.6.12
+
+### Patch Changes
+
+- [#171430](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171430)
+  [`d100d121a8a38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d100d121a8a38) -
+  [ux] Update editor's links to use design system's standards
+
 ## 112.6.11
 
 ### Patch Changes

package/dist/cjs/actions/index.js

@@ -210,6 +210,7 @@ var RendererActions = exports.default = /*#__PURE__*/function () {
       }
     }
 
+    // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
     /**
      * This is replaced by `isRangeAnnotatable`.
      *

package/dist/cjs/react/marks/link.js

@@ -13,6 +13,7 @@ var _colors = require("@atlaskit/theme/colors");
 var _utils = require("../../utils");
 var _events = require("../../analytics/events");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _linkUrl = _interopRequireDefault(require("@atlaskit/smart-card/link-url"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -80,5 +81,7 @@ function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children));
+  }, anchorProps, dataAttributes, (0, _platformFeatureFlags.fg)('platform_editor_hyperlink_underline') && {
+    isLinkComponent: true
+  }), props.children));
 }

package/dist/cjs/ui/Renderer/index.js

@@ -65,7 +65,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
 var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "112.6.11";
+var packageVersion = "112.6.13";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size',
@@ -76,6 +76,7 @@ var defaultNodeComponents = exports.defaultNodeComponents = _nodes.nodeToReact;
 /**
  * Exported due to enzyme test reliance on this component.
  */
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(__RendererClassComponent, _PureComponent);
   var _super = _createSuper(__RendererClassComponent);
@@ -445,18 +446,357 @@ var __RendererClassComponent = exports.__RendererClassComponent = /*#__PURE__*/f
   }]);
   return __RendererClassComponent;
 }(_react.PureComponent);
+var handleMouseTripleClickInTables = function handleMouseTripleClickInTables(event) {
+  var _parentElement3, _parentElement4;
+  if (_browser.browser.ios || _browser.browser.android) {
+    return;
+  }
+  var badBrowser = _browser.browser.chrome || _browser.browser.safari;
+  var tripleClick = event.detail >= 3;
+  if (!(badBrowser && tripleClick)) {
+    return;
+  }
+  var selection = window.getSelection();
+  if (!selection) {
+    return;
+  }
+  var type = selection.type,
+    anchorNode = selection.anchorNode,
+    focusNode = selection.focusNode;
+  var rangeSelection = Boolean(type === 'Range' && anchorNode && focusNode);
+  if (!rangeSelection) {
+    return;
+  }
+  var target = event.target;
+  var tableCell = target.closest('td,th');
+  var clickedInCell = Boolean(tableCell);
+  if (!clickedInCell) {
+    return;
+  }
+  var anchorInCell = tableCell.contains(anchorNode);
+  var focusInCell = tableCell.contains(focusNode);
+  var selectionStartsOrEndsOutsideClickedCell = !(anchorInCell && focusInCell);
+  if (!selectionStartsOrEndsOutsideClickedCell) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+
+  var elementToSelect = anchorInCell ? (_parentElement3 = anchorNode.parentElement) === null || _parentElement3 === void 0 ? void 0 : _parentElement3.closest('div,p') : focusInCell ? (_parentElement4 = focusNode.parentElement) === null || _parentElement4 === void 0 ? void 0 : _parentElement4.closest('div,p') : tableCell;
+  if (elementToSelect) {
+    selection.selectAllChildren(elementToSelect);
+  }
+};
+
+/**
+ * Handle clicks inside renderer. If the click isn't on media, in the media picker, or on a
+ * link, call the onUnhandledClick eventHandler (which in Jira for example, may switch the
+ * renderer out for the editor).
+ * @param event Click event anywhere inside renderer
+ */
+var handleWrapperOnClick = function handleWrapperOnClick(event, props, mouseDownSelection) {
+  var _props$eventHandlers;
+  var targetElement = event.target;
+  handleMouseTripleClickInTables(event);
+
+  // ED-14862: When a user triple clicks to select a line of content inside a
+  // a table cell, but the browser incorrectly moves the selection start or end into
+  // a different table cell, we manually set the selection back to within the original
+  // table cell the user intended to target
+  if (!((_props$eventHandlers = props.eventHandlers) !== null && _props$eventHandlers !== void 0 && _props$eventHandlers.onUnhandledClick)) {
+    return;
+  }
+  if (!(targetElement instanceof window.Element)) {
+    return;
+  }
+  var rendererWrapper = event.currentTarget;
+  var isInteractiveElementInTree = (0, _utils2.findInTree)(targetElement, rendererWrapper, _clickToEdit.isInteractiveElement);
+  if (isInteractiveElementInTree) {
+    return;
+  }
+
+  // Ensure that selecting text in the renderer doesn't trigger onUnhandledClick
+  // This logic originated in jira-frontend:
+  // src/packages/issue/issue-view/src/views/field/rich-text/rich-text-inline-edit-view.js
+
+  // The selection is required to be checked in `onMouseDown` and here. If not here, a new
+  // selection isn't reported; if not in `onMouseDown`, a click outside the selection will
+  // return an empty selection, which will erroneously fire onUnhandledClick.
+  var windowSelection = window.getSelection();
+  var selection = windowSelection !== null ? windowSelection.toString() : undefined;
+  var hasSelection = selection && selection.length !== 0;
+  var hasSelectionMouseDown = mouseDownSelection.current && mouseDownSelection.current.length !== 0;
+  var allowEditBasedOnSelection = !hasSelection && !hasSelectionMouseDown;
+  if (allowEditBasedOnSelection) {
+    props.eventHandlers.onUnhandledClick(event);
+  }
+};
+var RendererFunctionalComponent = function RendererFunctionalComponent(props) {
+  var mouseDownSelection = (0, _react.useRef)(undefined);
+  var providerFactory = (0, _react.useMemo)(function () {
+    return props.dataProviders || new _providerFactory.ProviderFactory();
+  }, [props.dataProviders]);
+  var createRendererContext = (0, _react.useMemo)(function () {
+    return function (featureFlags, isTopLevelRenderer) {
+      var normalizedFeatureFlags = (0, _normalizeFeatureFlags.normalizeFeatureFlags)(featureFlags);
+      return {
+        featureFlags: normalizedFeatureFlags,
+        isTopLevelRenderer: isTopLevelRenderer === undefined
+      };
+    };
+  }, []);
+  var _fireAnalyticsEvent = (0, _react.useCallback)(function (event) {
+    var createAnalyticsEvent = props.createAnalyticsEvent;
+    if (createAnalyticsEvent) {
+      var channel = _types.FabricChannel.editor;
+      createAnalyticsEvent(event).fire(channel);
+    }
+  }, [props]);
+  var deriveSerializerProps = (0, _react.useCallback)(function (props) {
+    var stickyHeaders = props.stickyHeaders ? props.stickyHeaders === true ? {} : props.stickyHeaders : undefined;
+    var annotationProvider = props.annotationProvider;
+    var allowAnnotationsDraftMode = Boolean(annotationProvider && annotationProvider.inlineComment && annotationProvider.inlineComment.allowDraftMode);
+    var _createRendererContex = createRendererContext(props.featureFlags, props.isTopLevelRenderer),
+      featureFlags = _createRendererContex.featureFlags;
+    return {
+      startPos: props.startPos,
+      providers: providerFactory,
+      eventHandlers: props.eventHandlers,
+      extensionHandlers: props.extensionHandlers,
+      portal: props.portal,
+      objectContext: _objectSpread({
+        adDoc: props.document,
+        schema: props.schema
+      }, props.rendererContext),
+      appearance: props.appearance,
+      disableHeadingIDs: props.disableHeadingIDs,
+      disableActions: props.disableActions,
+      allowHeadingAnchorLinks: props.allowHeadingAnchorLinks,
+      allowColumnSorting: props.allowColumnSorting,
+      fireAnalyticsEvent: _fireAnalyticsEvent,
+      shouldOpenMediaViewer: props.shouldOpenMediaViewer,
+      allowAltTextOnImages: props.allowAltTextOnImages,
+      stickyHeaders: stickyHeaders,
+      allowMediaLinking: props.media && props.media.allowLinking,
+      surroundTextNodesWithTextWrapper: allowAnnotationsDraftMode,
+      media: props.media,
+      emojiResourceConfig: props.emojiResourceConfig,
+      smartLinks: props.smartLinks,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowAnnotations: props.allowAnnotations,
+      allowSelectAllTrap: props.allowSelectAllTrap,
+      allowPlaceholderText: props.allowPlaceholderText,
+      nodeComponents: props.nodeComponents,
+      allowWindowedCodeBlock: featureFlags === null || featureFlags === void 0 ? void 0 : featureFlags.allowWindowedCodeBlock,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      textHighlighter: props.UNSTABLE_textHighlighter,
+      allowTableAlignment: props.UNSTABLE_allowTableAlignment,
+      allowTableResizing: props.UNSTABLE_allowTableResizing
+    };
+  }, [createRendererContext, providerFactory, _fireAnalyticsEvent]);
+  var serializer = (0, _react.useMemo)(function () {
+    var _props$startPos;
+    return new _.ReactSerializer(deriveSerializerProps(_objectSpread(_objectSpread({}, props), {}, {
+      startPos: (_props$startPos = props.startPos) !== null && _props$startPos !== void 0 ? _props$startPos : 0
+    })));
+  }, [deriveSerializerProps, props]);
+  var localRef = (0, _react.useRef)(null);
+  var editorRef = props.innerRef || localRef;
+  var id = (0, _react.useMemo)(function () {
+    return (0, _v.default)();
+  }, []);
+  var renderedMeasurementDistortedDurationMonitor = (0, _react.useMemo)(function () {
+    return (0, _measureRender.getDistortedDurationMonitor)();
+  }, []);
+
+  // we are doing this to ensure it runs as
+  // early as possible in the React lifecycle
+  // to avoid any other side effects
+  var measureStarted = (0, _react.useRef)(false);
+  var startAnalyticsMeasure = function startAnalyticsMeasure() {
+    (0, _performanceMeasures.startMeasure)("Renderer Render Time: ".concat(id));
+  };
+  if (!measureStarted.current) {
+    startAnalyticsMeasure();
+    measureStarted.current = true;
+  }
+  var anchorLinkAnalytics = (0, _react.useCallback)(function () {
+    var hash = window.location.hash && decodeURIComponent(window.location.hash.slice(1));
+    var disableHeadingIDs = props.disableHeadingIDs;
+    if (!disableHeadingIDs && hash && editorRef && editorRef.current instanceof HTMLElement) {
+      var anchorLinkElement = document.getElementById(hash);
+      if (anchorLinkElement && editorRef.current.contains(anchorLinkElement)) {
+        _fireAnalyticsEvent({
+          action: _analytics.ACTION.VIEWED,
+          actionSubject: _analytics.ACTION_SUBJECT.ANCHOR_LINK,
+          attributes: {
+            platform: _events.PLATFORM.WEB,
+            mode: _events.MODE.RENDERER
+          },
+          eventType: _analytics.EVENT_TYPE.UI
+        });
+      }
+    }
+  }, [props.disableHeadingIDs, editorRef, _fireAnalyticsEvent]);
+  var getSchema = (0, _react.useMemo)(function () {
+    return function (schema, adfStage) {
+      if (schema) {
+        return schema;
+      }
+      return (0, _schemaDefault.getSchemaBasedOnStage)(adfStage);
+    };
+  }, []);
+  var onMouseDownEditView = function onMouseDownEditView() {
+    var windowSelection = window.getSelection();
+    mouseDownSelection.current = windowSelection !== null ? windowSelection.toString() : undefined;
+  };
+  var dataProviders = props.dataProviders,
+    analyticsEventSeverityTracking = props.analyticsEventSeverityTracking;
+  (0, _react.useEffect)(function () {
+    var rafID;
+    var handleAnalytics = function handleAnalytics() {
+      _fireAnalyticsEvent({
+        action: _analytics.ACTION.STARTED,
+        actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
+        attributes: {
+          platform: _events.PLATFORM.WEB
+        },
+        eventType: _analytics.EVENT_TYPE.UI
+      });
+      rafID = requestAnimationFrame(function () {
+        (0, _performanceMeasures.stopMeasure)("Renderer Render Time: ".concat(id), function (duration) {
+          var _analyticsEventSeveri3, _analyticsEventSeveri4;
+          var forceSeverityTracking = typeof analyticsEventSeverityTracking === 'undefined' && (0, _utils.shouldForceTracking)();
+          var severity = !!forceSeverityTracking || analyticsEventSeverityTracking !== null && analyticsEventSeverityTracking !== void 0 && analyticsEventSeverityTracking.enabled ? (0, _utils.getAnalyticsEventSeverity)(duration, (_analyticsEventSeveri3 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityNormalThreshold) !== null && _analyticsEventSeveri3 !== void 0 ? _analyticsEventSeveri3 : NORMAL_SEVERITY_THRESHOLD, (_analyticsEventSeveri4 = analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.severityDegradedThreshold) !== null && _analyticsEventSeveri4 !== void 0 ? _analyticsEventSeveri4 : DEGRADED_SEVERITY_THRESHOLD) : undefined;
+          var isTTRTrackingExplicitlyDisabled = (analyticsEventSeverityTracking === null || analyticsEventSeverityTracking === void 0 ? void 0 : analyticsEventSeverityTracking.enabled) === false;
+          if (!isTTRTrackingExplicitlyDisabled) {
+            _fireAnalyticsEvent({
+              action: _analytics.ACTION.RENDERED,
+              actionSubject: _analytics.ACTION_SUBJECT.RENDERER,
+              attributes: {
+                platform: _events.PLATFORM.WEB,
+                duration: duration,
+                distortedDuration: renderedMeasurementDistortedDurationMonitor.distortedDuration,
+                ttfb: (0, _navigation.getResponseEndTime)(),
+                nodes: (0, _countNodes.countNodes)(props.document),
+                severity: severity
+              },
+              eventType: _analytics.EVENT_TYPE.OPERATIONAL
+            });
+          }
+          renderedMeasurementDistortedDurationMonitor.cleanup();
+        });
+        anchorLinkAnalytics();
+      });
+    };
+    handleAnalytics();
+    return function () {
+      if (rafID) {
+        window.cancelAnimationFrame(rafID);
+      }
+      if (dataProviders) {
+        providerFactory.destroy();
+      }
+    };
+    // we are going to ignore this because I'm doing this on purpose
+    // having a dependency array means we run stopMeasure twice per render
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  try {
+    var _createRendererContex2, _props$media;
+    var schema = getSchema(props.schema, props.adfStage);
+    var _renderDocument2 = (0, _.renderDocument)(props.document, serializer, schema, props.adfStage, props.useSpecBasedValidator, id, _fireAnalyticsEvent, props.unsupportedContentLevelsTracking, props.appearance, props.includeNodesCountInStats),
+      result = _renderDocument2.result,
+      stat = _renderDocument2.stat,
+      pmDoc = _renderDocument2.pmDoc;
+    if (props.onComplete) {
+      props.onComplete(stat);
+    }
+    var rendererOutput = (0, _react2.jsx)(_rendererContext.RendererContextProvider, {
+      value: createRendererContext(props.featureFlags, props.isTopLevelRenderer)
+    }, (0, _react2.jsx)(_activeHeaderIdProvider.ActiveHeaderIdProvider, {
+      value: (0, _links.getActiveHeadingId)(props.allowHeadingAnchorLinks)
+    }, (0, _react2.jsx)(_analyticsContext.default.Provider, {
+      value: {
+        fireAnalyticsEvent: function fireAnalyticsEvent(event) {
+          return _fireAnalyticsEvent(event);
+        }
+      }
+    }, (0, _react2.jsx)(_SmartCardStorage.Provider, null, (0, _react2.jsx)(_providerFactory.ProviderFactoryProvider, {
+      value: providerFactory
+    }, (0, _react2.jsx)(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowNestedHeaderLinks: (0, _links.isNestedHeaderLinksEnabled)(props.allowHeadingAnchorLinks),
+      allowColumnSorting: props.allowColumnSorting,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowCustomPanels: props.allowCustomPanels,
+      allowPlaceholderText: props.allowPlaceholderText,
+      useBlockRenderForCodeBlock: (_createRendererContex2 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex2 !== void 0 ? _createRendererContex2 : true,
+      addTelepointer: props.addTelepointer,
+      innerRef: editorRef,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      onMouseDown: onMouseDownEditView,
+      ssr: (_props$media = props.media) === null || _props$media === void 0 ? void 0 : _props$media.ssr,
+      isInsideOfInlineExtension: props.isInsideOfInlineExtension,
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, props.enableSsrInlineScripts ? (0, _react2.jsx)(_breakoutSsr.BreakoutSSRInlineScript, null) : null, (0, _react2.jsx)(RendererActionsInternalUpdater, {
+      doc: pmDoc,
+      schema: schema,
+      onAnalyticsEvent: _fireAnalyticsEvent
+    }, result)))))));
+    var rendererResult = props.truncated ? (0, _react2.jsx)(_truncatedWrapper.TruncatedWrapper, {
+      height: props.maxHeight,
+      fadeHeight: props.fadeOutHeight
+    }, rendererOutput) : rendererOutput;
+    return (0, _react2.jsx)(_react.Fragment, null, rendererResult);
+  } catch (e) {
+    var _createRendererContex3;
+    if (props.onError) {
+      props.onError(e);
+    }
+    return (0, _react2.jsx)(RendererWrapper, {
+      allowAnnotations: props.allowAnnotations,
+      appearance: props.appearance,
+      allowCopyToClipboard: props.allowCopyToClipboard,
+      allowWrapCodeBlock: props.allowWrapCodeBlock,
+      allowPlaceholderText: props.allowPlaceholderText,
+      allowColumnSorting: props.allowColumnSorting,
+      allowNestedHeaderLinks: (0, _links.isNestedHeaderLinksEnabled)(props.allowHeadingAnchorLinks),
+      useBlockRenderForCodeBlock: (_createRendererContex3 = createRendererContext(props.featureFlags, props.isTopLevelRenderer).featureFlags.useBlockRenderForCodeBlock) !== null && _createRendererContex3 !== void 0 ? _createRendererContex3 : true,
+      addTelepointer: props.addTelepointer,
+      onClick: function onClick(event) {
+        return handleWrapperOnClick(event, props, mouseDownSelection);
+      },
+      isTopLevelRenderer: createRendererContext(props.featureFlags, props.isTopLevelRenderer).isTopLevelRenderer
+    }, (0, _react2.jsx)(_ui.UnsupportedBlock, null));
+  }
+};
 function Renderer(props) {
   var _React$useContext = _react.default.useContext(_annotations.AnnotationsPositionContext),
     startPos = _React$useContext.startPos;
   var _useRendererContext = (0, _rendererContext.useRendererContext)(),
     isTopLevelRenderer = _useRendererContext.isTopLevelRenderer;
-  return (
-    // eslint-disable-next-line react/jsx-pascal-case
-    (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
-      startPos: startPos,
-      isTopLevelRenderer: isTopLevelRenderer
-    }))
-  );
+  return (0, _platformFeatureFlags.fg)('platform_editor_react18_renderer') ? (0, _react2.jsx)(RendererFunctionalComponent, (0, _extends2.default)({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  })) :
+  // eslint-disable-next-line react/jsx-pascal-case
+  (0, _react2.jsx)(__RendererClassComponent, (0, _extends2.default)({}, props, {
+    startPos: startPos,
+    isTopLevelRenderer: isTopLevelRenderer
+  }));
 }
 
 // Usage notes:
@@ -506,7 +846,7 @@ var RendererWrapper = /*#__PURE__*/_react.default.memo(function (props) {
     return telepointer;
   };
   var initialUpdate = _react.default.useRef(true);
-  _react.default.useEffect(function () {
+  (0, _react.useEffect)(function () {
     // We must check if window is defined, if it isn't we are in a SSR environment
     // and we don't want to add the telepointer
     if (typeof window !== 'undefined' && addTelepointer && innerRef !== null && innerRef !== void 0 && innerRef.current) {
@@ -660,5 +1000,6 @@ var RendererWithAnnotationSelection = function RendererWithAnnotationSelection(p
   }))));
 };
 
+// eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
 /* @deprecated using this version of the renderer causes the RendererActions to inaccessible from any consumers */
 var _default = exports.default = RendererWithAnnotationSelection;

package/dist/es2019/actions/index.js

@@ -188,6 +188,7 @@ export default class RendererActions {
     }
   }
 
+  // eslint-disable-next-line @repo/internal/deprecations/deprecation-ticket-required -- Ignored via go/ED-25883
   /**
    * This is replaced by `isRangeAnnotatable`.
    *

package/dist/es2019/react/marks/link.js

@@ -10,6 +10,7 @@ import { B400, B300, B500 } from '@atlaskit/theme/colors';
 import { getEventHandler } from '../../utils';
 import { PLATFORM, MODE } from '../../analytics/events';
 import { ACTION, ACTION_SUBJECT, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { fg } from '@atlaskit/platform-feature-flags';
 import LinkUrl from '@atlaskit/smart-card/link-url';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
 const anchorStyles = css({
@@ -70,5 +71,7 @@ export default function Link(props) {
         handler(e, href);
       }
     }
-  }, anchorProps, dataAttributes), props.children));
+  }, anchorProps, dataAttributes, fg('platform_editor_hyperlink_underline') && {
+    isLinkComponent: true
+  }), props.children));
 }