@atlaskit/editor-plugin-card 1.12.1 → 1.14.0

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

@@ -2,10 +2,12 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDiscoverability';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
+import NewInlineCardOverlay from '../NewInlineCardOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
@@ -66,13 +68,27 @@ export const AwarenessWrapper = ({
     setIsHovered(isHovered);
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
-  const cardWithOverlay = useMemo(() => shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
-    isSelected: isSelected,
-    isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-    onMouseEnter: () => handleOverlayChange(true),
-    onMouseLeave: () => handleOverlayChange(false),
-    url: url
-  }, children) : children, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
+  const cardWithOverlay = useMemo(() => {
+    if (shouldShowLinkOverlay) {
+      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        return jsx(NewInlineCardOverlay, {
+          isSelected: isSelected,
+          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+          onMouseEnter: () => handleOverlayChange(true),
+          onMouseLeave: () => handleOverlayChange(false),
+          url: url
+        }, children);
+      }
+      return jsx(InlineCardOverlay, {
+        isSelected: isSelected,
+        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+        onMouseEnter: () => handleOverlayChange(true),
+        onMouseLeave: () => handleOverlayChange(false),
+        url: url
+      }, children);
+    }
+    return children;
+  }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return jsx("span", {

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

@@ -0,0 +1,213 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/** @jsx jsx */
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import debounce from 'lodash/debounce';
+import { useIntl } from 'react-intl-next';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/utils';
+import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
+import { B100, N0, N700 } from '@atlaskit/theme/colors';
+import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from '../InlineCardOverlay/utils';
+const DEBOUNCE_IN_MS = 5;
+const ESTIMATED_MIN_WIDTH_IN_PX = 16;
+const PADDING_IN_PX = 4;
+const ICON_WIDTH_IN_PX = 14;
+const ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
+const OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+const OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
+const TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
+const SMART_LINK_BACKGROUND_COLOR = `var(--ds-surface-raised, ${N0})`;
+// TODO: This should be lighter to match the rest of the button
+const SMART_LINK_ACTIVE_COLOR = `var(--ds-background-selected, ${B100})`;
+const containerStyles = css({
+  position: 'relative',
+  lineHeight: 'normal',
+  ':active': {
+    [`.${ICON_AND_LABEL_CLASSNAME}`]: {
+      background: SMART_LINK_ACTIVE_COLOR
+    }
+  }
+});
+const overlayStyles = css({
+  // Set default styling to be invisible but available in dom for width calculation.
+  visibility: 'hidden',
+  marginTop: "var(--ds-space-050, 4px)",
+  position: 'absolute',
+  verticalAlign: 'text-top',
+  height: '1lh',
+  '@supports not (height: 1lh)': {
+    height: '1.2em'
+  },
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  pointerEvents: 'none'
+});
+const showOverlayStyles = css({
+  visibility: 'visible'
+});
+const iconStyles = css({
+  // Position icon in the middle
+  span: {
+    display: 'flex'
+  }
+});
+const labelStyles = css({
+  fontSize: '0.875em',
+  fontWeight: '600',
+  width: 'max-content'
+});
+const iconAndLabelStyles = css({
+  display: 'flex',
+  alignItems: 'center',
+  height: '100%',
+  marginLeft: "var(--ds-space-050, 4px)",
+  marginRight: "var(--ds-space-025, 2px)",
+  background: SMART_LINK_BACKGROUND_COLOR,
+  color: `var(--ds-text-subtlest, ${N700})`
+});
+const overflowingContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  alignItems: 'center',
+  width: 'max-content',
+  height: '100%'
+});
+const NarrowInlineCardOverlay = ({
+  children,
+  isSelected = false,
+  isVisible = false,
+  testId = 'inline-card-overlay',
+  url,
+  ...props
+}) => {
+  const [showOverlay, setShowOverlay] = useState(false);
+  const [availableWidth, setAvailableWidth] = useState(undefined);
+  const maxOverlayWidth = useRef(0);
+  const minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  const parentWidth = useRef(0);
+  const iconSize = useRef('small');
+  const containerRef = useRef(null);
+
+  // TODO EDM-9843: Use availableWidth for small link edge case
+  availableWidth;
+  const setVisibility = useCallback(() => {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    const marker = getChildElement(containerRef, `.${OVERLAY_MARKER_CLASSNAME}`);
+    if (!marker) {
+      return;
+    }
+    try {
+      const oneLine = isOneLine(containerRef.current, marker);
+
+      // Get the width of the available space to display overlay.
+      // This is the width of the inline link itself. If the inline
+      // is wrapped to the next line, this is width of the last line.
+      const availableWidth = getInlineCardAvailableWidth(containerRef.current, marker) - PADDING_IN_PX - (
+      // Always leave at least the icon visible
+      oneLine ? ICON_WIDTH_IN_PX + PADDING_IN_PX : 0);
+      setAvailableWidth(availableWidth);
+      const canShowOverlay = !isSelected;
+      setShowOverlay(canShowOverlay);
+    } catch {
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, [isSelected]);
+  useLayoutEffect(() => {
+    // Using useLayoutEffect here.
+    // 1) We want all to be able to determine whether to display label before
+    //    the overlay becomes visible.
+    // 2) We need to wait for the refs to be assigned to be able to do determine
+    //    the width of the overlay.
+    if (!containerRef.current) {
+      return;
+    }
+
+    // This should run only once
+    if (!maxOverlayWidth.current) {
+      const iconAndLabel = getChildElement(containerRef, `.${ICON_AND_LABEL_CLASSNAME}`);
+      const label = getChildElement(containerRef, `.${OVERLAY_LABEL_CLASSNAME}`);
+      if (iconAndLabel && label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        const {
+          max,
+          min
+        } = getOverlayWidths(iconAndLabel, label);
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+        iconSize.current = getIconSize(label);
+      }
+    }
+    if (isVisible) {
+      setVisibility();
+    }
+  }, [setVisibility, isVisible]);
+  useEffect(() => {
+    var _containerRef$current;
+    // Find the closest block parent to observe size change
+    const parent = containerRef === null || containerRef === void 0 ? void 0 : (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
+    if (!parent) {
+      return;
+    }
+    const updateOverlay = debounce(entries => {
+      var _entries$, _entries$$contentBoxS, _entries$$contentBoxS2;
+      if (!isVisible) {
+        return;
+      }
+      const size = entries === null || entries === void 0 ? void 0 : (_entries$ = entries[0]) === null || _entries$ === void 0 ? void 0 : (_entries$$contentBoxS = _entries$.contentBoxSize) === null || _entries$$contentBoxS === void 0 ? void 0 : (_entries$$contentBoxS2 = _entries$$contentBoxS[0]) === null || _entries$$contentBoxS2 === void 0 ? void 0 : _entries$$contentBoxS2.inlineSize;
+      if (!size) {
+        return;
+      }
+      if (!parentWidth.current) {
+        parentWidth.current = size;
+      }
+      if (parentWidth.current === size) {
+        return;
+      }
+      parentWidth.current = size;
+      setVisibility();
+    }, DEBOUNCE_IN_MS);
+    const observer = new ResizeObserver(updateOverlay);
+    observer.observe(parent);
+    return () => {
+      observer.disconnect();
+    };
+  }, [isVisible, setVisibility]);
+  const intl = useIntl();
+  const label = intl.formatMessage(messages.inlineOverlay);
+  return jsx("span", _extends({}, props, {
+    css: containerStyles,
+    ref: containerRef
+  }), isVisible && jsx(React.Fragment, null, jsx("span", {
+    "aria-hidden": "true",
+    className: OVERLAY_MARKER_CLASSNAME
+  }, ZERO_WIDTH_JOINER), jsx("a", {
+    css: [overlayStyles, showOverlay && showOverlayStyles],
+    "data-testid": testId,
+    href: url,
+    onClick: e => e.preventDefault(),
+    tabIndex: -1
+  }, jsx("span", {
+    css: overflowingContainerStyles
+  }, jsx("span", {
+    css: iconAndLabelStyles,
+    className: ICON_AND_LABEL_CLASSNAME
+  }, jsx("span", {
+    css: iconStyles
+  }, jsx(PreferencesIcon, {
+    label: label,
+    size: iconSize.current,
+    testId: `${testId}-icon`
+  })), jsx("span", {
+    css: labelStyles,
+    className: OVERLAY_LABEL_CLASSNAME,
+    "data-testid": `${testId}-label`
+  }))))), children);
+};
+export default NarrowInlineCardOverlay;

package/dist/esm/nodeviews/inlineCard.js

@@ -1,122 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
-import PropTypes from 'prop-types';
-import rafSchedule from 'raf-schd';
-import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard } from '../pm-plugins/actions';
 import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
 import { Card } from './genericCard';
 import { InlineCardWithAwareness } from './inlineCardWithAwareness';
-
-// eslint-disable-next-line @repo/internal/react/no-class-components
-export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(InlineCardComponent, _React$PureComponent);
-  var _super = _createSuper(InlineCardComponent);
-  function InlineCardComponent() {
-    var _this;
-    _classCallCheck(this, InlineCardComponent);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "onResolve", function (data) {
-      var _this$props = _this.props,
-        getPos = _this$props.getPos,
-        view = _this$props.view;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      var title = data.title,
-        url = data.url;
-      // don't dispatch immediately since we might be in the middle of
-      // rendering a nodeview
-      rafSchedule(function () {
-        // prosemirror-bump-fix
-        var pos = getPos();
-        if (typeof pos !== 'number') {
-          return;
-        }
-        var tr = view.state.tr;
-        registerCard({
-          title: title,
-          url: url,
-          pos: pos
-        })(tr);
-        view.dispatch(tr);
-      })();
-    });
-    _defineProperty(_assertThisInitialized(_this), "onError", function (data) {
-      var url = data.url,
-        err = data.err;
-      if (err) {
-        throw err;
-      }
-      _this.onResolve({
-        url: url
-      });
-    });
-    return _this;
-  }
-  _createClass(InlineCardComponent, [{
-    key: "UNSAFE_componentWillMount",
-    value: function UNSAFE_componentWillMount() {
-      var view = this.props.view;
-      var scrollContainer = findOverflowScrollParent(view.dom);
-      this.scrollContainer = scrollContainer || undefined;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props2 = this.props,
-        node = _this$props2.node,
-        cardContext = _this$props2.cardContext,
-        actionOptions = _this$props2.actionOptions,
-        showServerActions = _this$props2.showServerActions,
-        useAlternativePreloader = _this$props2.useAlternativePreloader,
-        onClick = _this$props2.onClick;
-      var _node$attrs = node.attrs,
-        url = _node$attrs.url,
-        data = _node$attrs.data;
-      var card = /*#__PURE__*/React.createElement("span", {
-        className: "card"
-      }, /*#__PURE__*/React.createElement(SmartCard, {
-        key: url,
-        url: url,
-        data: data,
-        appearance: "inline",
-        onClick: onClick,
-        container: this.scrollContainer,
-        onResolve: this.onResolve,
-        onError: this.onError,
-        inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
-        actionOptions: actionOptions,
-        showServerActions: showServerActions
-      }));
-      // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
-      // otherwise if we got data, we can render the card directly since it doesn't need the Provider
-      return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
-        value: cardContext.value
-      }, card) : data ? card : null;
-    }
-  }]);
-  return InlineCardComponent;
-}(React.PureComponent);
-_defineProperty(InlineCardComponent, "contextTypes", {
-  contextAdapter: PropTypes.object
-});
-var WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
 var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 export function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
@@ -130,18 +18,6 @@ export function InlineCardNodeView(props) {
     enableInlineUpgradeFeatures = props.enableInlineUpgradeFeatures,
     pluginInjectionApi = props.pluginInjectionApi,
     onClickCallback = props.onClickCallback;
-  if (!getBooleanFF('platform.linking-platform.smart-card.inline-switcher')) {
-    return /*#__PURE__*/React.createElement(WrappedInlineCard, {
-      node: node,
-      view: view,
-      getPos: getPos,
-      actionOptions: actionOptions,
-      showServerActions: showServerActions,
-      useAlternativePreloader: useAlternativePreloader,
-      pluginInjectionApi: pluginInjectionApi,
-      onClickCallback: onClickCallback
-    });
-  }
   return /*#__PURE__*/React.createElement(WrappedInlineCardWithAwareness, _extends({
     node: node,
     view: view,

package/dist/esm/pm-plugins/main.js

@@ -50,7 +50,6 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
       allowBlockCards = options.allowBlockCards,
       onClickCallback = options.onClickCallback;
     var enableInlineUpgradeFeatures = !!showUpgradeDiscoverability && platform !== 'mobile';
-    var shouldUseUpgradeFeatures = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') && enableInlineUpgradeFeatures;
     var inlineCardViewProducer = getInlineNodeViewProducer({
       pmPluginFactoryParams: pmPluginFactoryParams,
       Component: InlineCardNodeView,
@@ -107,7 +106,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
           if (!meta) {
             return pluginStateWithUpdatedPos;
           }
-          if (!shouldUseUpgradeFeatures) {
+          if (!enableInlineUpgradeFeatures) {
             return reducer(pluginStateWithUpdatedPos, meta);
           }
           var newState = reducer(pluginStateWithUpdatedPos, meta);
@@ -271,7 +270,7 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             return new EmbedCard(node, view, getPos, portalProviderAPI, eventDispatcher, reactComponentProps, undefined, true, undefined, hasIntlContext).init();
           }
         }
-      }, shouldUseUpgradeFeatures && {
+      }, enableInlineUpgradeFeatures && {
         handleKeyDown: function handleKeyDown(view) {
           handleAwarenessOverlay(view);
           return false;

package/dist/esm/toolbar.js

@@ -484,5 +484,5 @@ var getDatasourceButtonGroup = function getDatasourceButtonGroup(metadata, intl,
   return toolbarItems;
 };
 export var shouldRenderToolbarPulse = function shouldRenderToolbarPulse(embedEnabled, appearance, status, isDiscoverabilityEnabled) {
-  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled && getBooleanFF('platform.linking-platform.smart-card.inline-switcher');
+  return embedEnabled && appearance === 'inline' && status === 'resolved' && isDiscoverabilityEnabled;
 };

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

@@ -3,10 +3,12 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import useLinkUpgradeDiscoverability from '../../common/hooks/useLinkUpgradeDiscoverability';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../../common/local-storage';
 import { getResolvedAttributesFromStore } from '../../utils';
 import InlineCardOverlay from '../InlineCardOverlay';
+import NewInlineCardOverlay from '../NewInlineCardOverlay';
 import { DiscoveryPulse } from '../Pulse';
 // editor adds a standard line-height that is bigger than an inline smart link
 // due to that the link has a bit of white space around it, which doesn't look right when there is pulse around it
@@ -69,17 +71,33 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = useMemo(function () {
-    return shouldShowLinkOverlay ? jsx(InlineCardOverlay, {
-      isSelected: isSelected,
-      isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-      onMouseEnter: function onMouseEnter() {
-        return handleOverlayChange(true);
-      },
-      onMouseLeave: function onMouseLeave() {
-        return handleOverlayChange(false);
-      },
-      url: url
-    }, children) : children;
+    if (shouldShowLinkOverlay) {
+      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+        return jsx(NewInlineCardOverlay, {
+          isSelected: isSelected,
+          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+          onMouseEnter: function onMouseEnter() {
+            return handleOverlayChange(true);
+          },
+          onMouseLeave: function onMouseLeave() {
+            return handleOverlayChange(false);
+          },
+          url: url
+        }, children);
+      }
+      return jsx(InlineCardOverlay, {
+        isSelected: isSelected,
+        isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
+        onMouseEnter: function onMouseEnter() {
+          return handleOverlayChange(true);
+        },
+        onMouseLeave: function onMouseLeave() {
+          return handleOverlayChange(false);
+        },
+        url: url
+      }, children);
+    }
+    return children;
   }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;