@atlaskit/editor-plugin-card 1.12.1 → 1.14.0

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

@@ -0,0 +1,224 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
+/* 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';
+var DEBOUNCE_IN_MS = 5;
+var ESTIMATED_MIN_WIDTH_IN_PX = 16;
+var PADDING_IN_PX = 4;
+var ICON_WIDTH_IN_PX = 14;
+var ICON_AND_LABEL_CLASSNAME = 'ak-editor-card-overlay-icon-and-label';
+var OVERLAY_LABEL_CLASSNAME = 'ak-editor-card-overlay-label';
+var OVERLAY_MARKER_CLASSNAME = 'ak-editor-card-overlay-marker';
+var TEXT_NODE_SELECTOR = ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'].join(',');
+var SMART_LINK_BACKGROUND_COLOR = "var(--ds-surface-raised, ".concat(N0, ")");
+// TODO: This should be lighter to match the rest of the button
+var SMART_LINK_ACTIVE_COLOR = "var(--ds-background-selected, ".concat(B100, ")");
+var containerStyles = css({
+  position: 'relative',
+  lineHeight: 'normal',
+  ':active': _defineProperty({}, ".".concat(ICON_AND_LABEL_CLASSNAME), {
+    background: SMART_LINK_ACTIVE_COLOR
+  })
+});
+var 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'
+});
+var showOverlayStyles = css({
+  visibility: 'visible'
+});
+var iconStyles = css({
+  // Position icon in the middle
+  span: {
+    display: 'flex'
+  }
+});
+var labelStyles = css({
+  fontSize: '0.875em',
+  fontWeight: '600',
+  width: 'max-content'
+});
+var 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, ".concat(N700, ")")
+});
+var overflowingContainerStyles = css({
+  display: 'flex',
+  flexDirection: 'row-reverse',
+  alignItems: 'center',
+  width: 'max-content',
+  height: '100%'
+});
+var NarrowInlineCardOverlay = function NarrowInlineCardOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isSelected = _ref.isSelected,
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    _ref$testId = _ref.testId,
+    testId = _ref$testId === void 0 ? 'inline-card-overlay' : _ref$testId,
+    url = _ref.url,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showOverlay = _useState2[0],
+    setShowOverlay = _useState2[1];
+  var _useState3 = useState(undefined),
+    _useState4 = _slicedToArray(_useState3, 2),
+    availableWidth = _useState4[0],
+    setAvailableWidth = _useState4[1];
+  var maxOverlayWidth = useRef(0);
+  var minOverlayWidth = useRef(ESTIMATED_MIN_WIDTH_IN_PX);
+  var parentWidth = useRef(0);
+  var iconSize = useRef('small');
+  var containerRef = useRef(null);
+
+  // TODO EDM-9843: Use availableWidth for small link edge case
+  availableWidth;
+  var setVisibility = useCallback(function () {
+    if (!containerRef.current || !maxOverlayWidth.current) {
+      return;
+    }
+    var marker = getChildElement(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
+    if (!marker) {
+      return;
+    }
+    try {
+      var 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.
+      var _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);
+      var canShowOverlay = !isSelected;
+      setShowOverlay(canShowOverlay);
+    } catch (_unused) {
+      // If something goes wrong, hide the overlay all together.
+      setShowOverlay(false);
+    }
+  }, [isSelected]);
+  useLayoutEffect(function () {
+    // 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) {
+      var iconAndLabel = getChildElement(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
+      var _label = getChildElement(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
+      if (iconAndLabel && _label) {
+        // Set overlay max (label + icon) and min (icon only) width.
+        var _getOverlayWidths = getOverlayWidths(iconAndLabel, _label),
+          max = _getOverlayWidths.max,
+          min = _getOverlayWidths.min;
+        maxOverlayWidth.current = max;
+        minOverlayWidth.current = min;
+        iconSize.current = getIconSize(_label);
+      }
+    }
+    if (isVisible) {
+      setVisibility();
+    }
+  }, [setVisibility, isVisible]);
+  useEffect(function () {
+    var _containerRef$current;
+    // Find the closest block parent to observe size change
+    var parent = containerRef === null || containerRef === void 0 || (_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.closest(TEXT_NODE_SELECTOR);
+    if (!parent) {
+      return;
+    }
+    var updateOverlay = debounce(function (entries) {
+      var _entries$;
+      if (!isVisible) {
+        return;
+      }
+      var size = entries === null || entries === void 0 || (_entries$ = entries[0]) === null || _entries$ === void 0 || (_entries$ = _entries$.contentBoxSize) === null || _entries$ === void 0 || (_entries$ = _entries$[0]) === null || _entries$ === void 0 ? void 0 : _entries$.inlineSize;
+      if (!size) {
+        return;
+      }
+      if (!parentWidth.current) {
+        parentWidth.current = size;
+      }
+      if (parentWidth.current === size) {
+        return;
+      }
+      parentWidth.current = size;
+      setVisibility();
+    }, DEBOUNCE_IN_MS);
+    var observer = new ResizeObserver(updateOverlay);
+    observer.observe(parent);
+    return function () {
+      observer.disconnect();
+    };
+  }, [isVisible, setVisibility]);
+  var intl = useIntl();
+  var 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: function onClick(e) {
+      return 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: "".concat(testId, "-icon")
+  })), jsx("span", {
+    css: labelStyles,
+    className: OVERLAY_LABEL_CLASSNAME,
+    "data-testid": "".concat(testId, "-label")
+  }))))), children);
+};
+export default NarrowInlineCardOverlay;

package/dist/types/nodeviews/inlineCard.d.ts

@@ -1,23 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+/// <reference types="react" />
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
 import type { SmartCardProps } from './genericCard';
-export declare class InlineCardComponent extends React.PureComponent<SmartCardProps> {
-    private scrollContainer?;
-    static contextTypes: {
-        contextAdapter: PropTypes.Requireable<object>;
-    };
-    UNSAFE_componentWillMount(): void;
-    onResolve: (data: {
-        url?: string | undefined;
-        title?: string | undefined;
-    }) => void;
-    onError: (data: {
-        url?: string | undefined;
-        err?: Error | undefined;
-    }) => void;
-    render(): JSX.Element | null;
-}
 export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'showServerActions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback'>;
 type InlineCardWithAwarenessProps = {
     allowEmbeds?: boolean;

package/dist/types/ui/NewInlineCardOverlay/index.d.ts

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { InlineCardOverlayProps } from '../InlineCardOverlay/types';
+declare const NarrowInlineCardOverlay: ({ children, isSelected, isVisible, testId, url, ...props }: React.PropsWithChildren<InlineCardOverlayProps>) => jsx.JSX.Element;
+export default NarrowInlineCardOverlay;

package/dist/types-ts4.5/nodeviews/inlineCard.d.ts

@@ -1,23 +1,6 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+/// <reference types="react" />
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
 import type { SmartCardProps } from './genericCard';
-export declare class InlineCardComponent extends React.PureComponent<SmartCardProps> {
-    private scrollContainer?;
-    static contextTypes: {
-        contextAdapter: PropTypes.Requireable<object>;
-    };
-    UNSAFE_componentWillMount(): void;
-    onResolve: (data: {
-        url?: string | undefined;
-        title?: string | undefined;
-    }) => void;
-    onError: (data: {
-        url?: string | undefined;
-        err?: Error | undefined;
-    }) => void;
-    render(): JSX.Element | null;
-}
 export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'showServerActions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback'>;
 type InlineCardWithAwarenessProps = {
     allowEmbeds?: boolean;

package/dist/types-ts4.5/ui/NewInlineCardOverlay/index.d.ts

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { InlineCardOverlayProps } from '../InlineCardOverlay/types';
+declare const NarrowInlineCardOverlay: ({ children, isSelected, isVisible, testId, url, ...props }: React.PropsWithChildren<InlineCardOverlayProps>) => jsx.JSX.Element;
+export default NarrowInlineCardOverlay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.12.1",
+  "version": "1.14.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -32,10 +32,10 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^36.3.0",
+    "@atlaskit/adf-schema": "^36.8.0",
     "@atlaskit/analytics-next": "^9.3.0",
     "@atlaskit/custom-steps": "^0.2.0",
-    "@atlaskit/editor-common": "^80.1.0",
+    "@atlaskit/editor-common": "^80.4.0",
     "@atlaskit/editor-plugin-analytics": "^1.2.0",
     "@atlaskit/editor-plugin-decorations": "^1.1.0",
     "@atlaskit/editor-plugin-editor-viewmode": "^1.1.0",
@@ -50,12 +50,12 @@
     "@atlaskit/icon": "^22.2.0",
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
-    "@atlaskit/link-datasource": "^2.2.0",
+    "@atlaskit/link-datasource": "^2.3.0",
     "@atlaskit/linking-common": "^5.6.0",
     "@atlaskit/linking-types": "^8.8.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^6.1.0",
-    "@atlaskit/smart-card": "^26.68.0",
+    "@atlaskit/primitives": "^6.2.0",
+    "@atlaskit/smart-card": "^26.69.0",
     "@atlaskit/theme": "^12.8.0",
     "@atlaskit/tokens": "^1.48.0",
     "@babel/runtime": "^7.0.0",
@@ -105,7 +105,7 @@
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0",
   "platform-feature-flags": {
-    "platform.linking-platform.smart-card.inline-switcher": {
+    "platform.linking-platform.smart-links-in-live-pages": {
       "type": "boolean"
     },
     "platform.linking-platform.datasource-word_wrap": {