@atlaskit/editor-plugin-card 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-card
 
+## 5.0.1
+
+### Patch Changes
+
+- [#117971](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117971)
+  [`d63604c31bb17`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/d63604c31bb17) -
+  [ux] Editor controls - Link consumption friendliness with open link on hover
+- Updated dependencies
+
 ## 5.0.0
 
 ### Major Changes

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

@@ -9,10 +9,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _utils = require("../../pm-plugins/utils");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../hooks/useLinkUpgradeDiscoverability"));
 var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
 var _localStorage = require("../local-storage");
+var _OpenButtonOverlay = _interopRequireDefault(require("../OpenButtonOverlay"));
 var _Pulse = require("../Pulse");
 /**
  * @jsxRuntime classic
@@ -98,6 +100,18 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  var cardWithOpenButtonOverlay = (0, _react.useMemo)(function () {
+    return (0, _react2.jsx)(_OpenButtonOverlay.default, {
+      isVisible: isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
     return (
@@ -115,7 +129,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _new = require("@atlaskit/button/new");
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _excluded = ["children", "isVisible", "url"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+// eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var containerStyles = (0, _react2.css)({
+  position: 'relative'
+});
+var overlayStyles = (0, _react2.css)({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+  }
+});
+var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // TODO add translation
+  var label = 'Open';
+  var handleDoubleClick = function handleDoubleClick() {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
+    (0, _react2.jsx)("span", (0, _extends2.default)({}, props, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && (0, _react2.jsx)("div", {
+      css: [overlayStyles]
+    }, (0, _react2.jsx)(_new.LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: _linkExternal.default,
+      appearance: "default"
+    }, label)))
+  );
+};
+var _default = exports.default = OpenButtonOverlay;

package/dist/cjs/ui/OpenButtonOverlay/types.js

@@ -0,0 +1 @@
+"use strict";

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

@@ -7,10 +7,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
 import InlineCardOverlay from '../InlineCardOverlay';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
+import OpenButtonOverlay from '../OpenButtonOverlay';
 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
@@ -84,6 +86,14 @@ export const AwarenessWrapper = ({
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  const cardWithOpenButtonOverlay = useMemo(() => {
+    return jsx(OpenButtonOverlay, {
+      isVisible: isHovered,
+      onMouseEnter: () => handleOverlayChange(true),
+      onMouseLeave: () => handleOverlayChange(false),
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return (
@@ -101,7 +111,7 @@ export const AwarenessWrapper = ({
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,65 @@
+import _extends from "@babel/runtime/helpers/extends";
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { LinkButton } from '@atlaskit/button/new';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+const containerStyles = css({
+  position: 'relative'
+});
+const overlayStyles = css({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    padding: `${"var(--ds-border-width, 1px)"} ${"var(--ds-space-050, 4px)"} 0`
+  }
+});
+const OpenButtonOverlay = ({
+  children,
+  isVisible = false,
+  url,
+  ...props
+}) => {
+  // TODO add translation
+  const label = 'Open';
+  const handleDoubleClick = () => {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
+    jsx("span", _extends({}, props, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && jsx("div", {
+      css: [overlayStyles]
+    }, jsx(LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: LinkExternalIcon,
+      appearance: "default"
+    }, label)))
+  );
+};
+export default OpenButtonOverlay;

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

@@ -8,10 +8,12 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { getResolvedAttributesFromStore } from '../../pm-plugins/utils';
 import useLinkUpgradeDiscoverability from '../hooks/useLinkUpgradeDiscoverability';
 import InlineCardOverlay from '../InlineCardOverlay';
 import { isLocalStorageKeyDiscovered, LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK, LOCAL_STORAGE_DISCOVERY_KEY_TOOLBAR, markLocalStorageKeyDiscovered, ONE_DAY_IN_MILLISECONDS } from '../local-storage';
+import OpenButtonOverlay from '../OpenButtonOverlay';
 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
@@ -90,6 +92,18 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     }
     return children;
   }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, handleOverlayChange]);
+  var cardWithOpenButtonOverlay = useMemo(function () {
+    return jsx(OpenButtonOverlay, {
+      isVisible: isHovered,
+      onMouseEnter: function onMouseEnter() {
+        return handleOverlayChange(true);
+      },
+      onMouseLeave: function onMouseLeave() {
+        return handleOverlayChange(false);
+      },
+      url: url
+    }, children);
+  }, [children, isHovered, url, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;
     return (
@@ -107,7 +121,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
         discoveryMode: "start",
         shouldShowPulse: isResolvedViewRendered && shouldShowLinkPulse,
         testId: "link-discovery-pulse"
-      }, cardWithOverlay)))
+      }, editorExperiment('platform_editor_controls', 'variant1') ? cardWithOpenButtonOverlay : cardWithOverlay)))
     );
-  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay]);
+  }, [shouldShowLinkPulse, url, cardContext === null || cardContext === void 0 || (_cardContext$value2 = cardContext.value) === null || _cardContext$value2 === void 0 ? void 0 : _cardContext$value2.store, isResolvedViewRendered, cardWithOverlay, cardWithOpenButtonOverlay]);
 };

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

@@ -0,0 +1,67 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["children", "isVisible", "url"];
+/* eslint-disable @atlaskit/design-system/no-nested-styles */
+/* eslint-disable @atlaskit/design-system/prefer-primitives */
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { css, jsx } from '@emotion/react'; // eslint-disable-line @atlaskit/ui-styling-standard/use-compiled
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import { LinkButton } from '@atlaskit/button/new';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+var containerStyles = css({
+  position: 'relative'
+});
+var overlayStyles = css({
+  position: 'absolute',
+  left: '2px',
+  top: 0,
+  backgroundColor: "var(--ds-background-accent-gray-subtlest, #F1F2F4)",
+  borderRadius: "var(--ds-border-radius, 3px)",
+  display: 'inline-flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  verticalAlign: 'text-top',
+  height: '19px',
+  overflow: 'hidden',
+  // EDM-1717: box-shadow Safari fix bring load wrapper zIndex to 1
+  zIndex: 2,
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
+  a: {
+    padding: "var(--ds-border-width, 1px)".concat(" ", "var(--ds-space-050, 4px)", " 0")
+  }
+});
+var OpenButtonOverlay = function OpenButtonOverlay(_ref) {
+  var children = _ref.children,
+    _ref$isVisible = _ref.isVisible,
+    isVisible = _ref$isVisible === void 0 ? false : _ref$isVisible,
+    url = _ref.url,
+    props = _objectWithoutProperties(_ref, _excluded);
+  // TODO add translation
+  var label = 'Open';
+  var handleDoubleClick = function handleDoubleClick() {
+    // Double click opens the link in a new tab
+    window.open(url, '_blank');
+  };
+  return (
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/jsx-props-no-spreading, jsx-a11y/no-static-element-interactions
+    jsx("span", _extends({}, props, {
+      css: containerStyles,
+      onDoubleClick: handleDoubleClick
+    }), children, isVisible && jsx("div", {
+      css: [overlayStyles]
+    }, jsx(LinkButton, {
+      spacing: "compact",
+      href: url,
+      target: "_blank",
+      iconBefore: LinkExternalIcon,
+      appearance: "default"
+    }, label)))
+  );
+};
+export default OpenButtonOverlay;

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { OpenButtonOverlayProps } from './types';
+declare const OpenButtonOverlay: ({ children, isVisible, url, ...props }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
+export default OpenButtonOverlay;

package/dist/types/ui/OpenButtonOverlay/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+};

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

@@ -0,0 +1,9 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import type { OpenButtonOverlayProps } from './types';
+declare const OpenButtonOverlay: ({ children, isVisible, url, ...props }: React.PropsWithChildren<OpenButtonOverlayProps>) => jsx.JSX.Element;
+export default OpenButtonOverlay;

package/dist/types-ts4.5/ui/OpenButtonOverlay/types.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type OpenButtonOverlayProps = React.HTMLAttributes<HTMLSpanElement> & {
+    isVisible?: boolean;
+    url: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "5.0.0",
+	"version": "5.0.1",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/adf-schema": "^47.2.1",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/custom-steps": "^0.10.0",
-		"@atlaskit/editor-common": "^100.0.0",
+		"@atlaskit/editor-common": "^100.1.0",
 		"@atlaskit/editor-plugin-analytics": "^2.0.0",
 		"@atlaskit/editor-plugin-base": "^2.2.0",
 		"@atlaskit/editor-plugin-connectivity": "^2.0.0",
@@ -59,8 +59,8 @@
 		"@atlaskit/primitives": "^14.0.0",
 		"@atlaskit/smart-card": "^35.0.0",
 		"@atlaskit/theme": "^17.0.0",
-		"@atlaskit/tmp-editor-statsig": "^3.0.0",
-		"@atlaskit/tokens": "^4.0.0",
+		"@atlaskit/tmp-editor-statsig": "^3.1.0",
+		"@atlaskit/tokens": "^4.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",