@atlaskit/editor-plugin-card 2.2.2 → 2.3.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-card
 
+## 2.3.0
+
+### Minor Changes
+
+- [#114832](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/114832)
+  [`a38ae4ff11746`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a38ae4ff11746) -
+  [ux] Add new configure overlay button to inline cards behind a feature flag.
+
 ## 2.2.2
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -129,14 +129,15 @@ var InlineCard = function InlineCard(_ref) {
       isResolvedViewRendered: isResolvedViewRendered,
       markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
       pluginInjectionApi: pluginInjectionApi,
-      setOverlayHoveredStyles: setOverlayHoveredStyles
+      setOverlayHoveredStyles: setOverlayHoveredStyles,
+      view: view
     }, innerCard) :
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     _react.default.createElement("span", {
       className: "card"
     }, innerCard);
-  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url]);
+  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view]);
 
   // [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

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

@@ -13,8 +13,8 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _useLinkUpgradeDiscoverability = _interopRequireDefault(require("../../common/hooks/useLinkUpgradeDiscoverability"));
 var _localStorage = require("../../common/local-storage");
 var _utils = require("../../utils");
+var _ConfigureOverlay = _interopRequireDefault(require("../ConfigureOverlay"));
 var _InlineCardOverlay = _interopRequireDefault(require("../InlineCardOverlay"));
-var _LeftIconOverlay = _interopRequireDefault(require("../LeftIconOverlay"));
 var _Pulse = require("../Pulse");
 /** @jsx jsx */
 
@@ -41,7 +41,8 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     markMostRecentlyInsertedLink = _ref.markMostRecentlyInsertedLink,
     pluginInjectionApi = _ref.pluginInjectionApi,
     setOverlayHoveredStyles = _ref.setOverlayHoveredStyles,
-    url = _ref.url;
+    url = _ref.url,
+    view = _ref.view;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isHovered = _useState2[0],
@@ -81,19 +82,13 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = (0, _react.useMemo)(function () {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
+      return (0, _react2.jsx)(_ConfigureOverlay.default, {
+        targetElementPos: linkPosition,
+        view: view
+      }, children);
+    }
     if (shouldShowLinkOverlay) {
-      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
-        return (0, _react2.jsx)(_LeftIconOverlay.default, {
-          isSelected: isSelected,
-          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-          onMouseEnter: function onMouseEnter() {
-            return handleOverlayChange(true);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return handleOverlayChange(false);
-          }
-        }, children);
-      }
       return (0, _react2.jsx)(_InlineCardOverlay.default, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -107,7 +102,7 @@ var AwarenessWrapper = exports.AwarenessWrapper = function AwarenessWrapper(_ref
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, view, linkPosition, handleOverlayChange]);
   return (0, _react.useMemo)(function () {
     var _cardContext$value;
     return (

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _link = require("@atlaskit/editor-common/link");
+/** @jsx jsx */
+
+// not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+
+var ConfigureOverlayWrapperStyles = (0, _react2.css)({
+  position: 'relative',
+  left: "var(--ds-space-025, 2px)"
+});
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var view = _ref.view,
+    targetElementPos = _ref.targetElementPos,
+    children = _ref.children;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    showConfigureButton = _useState2[0],
+    setShowConfigureButton = _useState2[1];
+  return (0, _react2.jsx)("span", {
+    onMouseEnter: function onMouseEnter() {
+      return setShowConfigureButton(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowConfigureButton(false);
+    },
+    "data-testid": "inline-card-overlay-wrapper"
+  }, (0, _react2.jsx)("span", {
+    css: ConfigureOverlayWrapperStyles
+  }, showConfigureButton && (0, _react2.jsx)(_link.OverlayButton, {
+    editorView: view,
+    targetElementPos: targetElementPos
+  })), children);
+};
+var _default = exports.default = OverlayWrapper;

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -108,14 +108,15 @@ const InlineCard = ({
       isResolvedViewRendered: isResolvedViewRendered,
       markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
       pluginInjectionApi: pluginInjectionApi,
-      setOverlayHoveredStyles: setOverlayHoveredStyles
+      setOverlayHoveredStyles: setOverlayHoveredStyles,
+      view: view
     }, innerCard) :
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     React.createElement("span", {
       className: "card"
     }, innerCard);
-  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url]);
+  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view]);
 
   // [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

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

@@ -8,8 +8,8 @@ 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 OverlayWrapper from '../ConfigureOverlay';
 import InlineCardOverlay from '../InlineCardOverlay';
-import LeftIconOverlay from '../LeftIconOverlay';
 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
@@ -31,7 +31,8 @@ export const AwarenessWrapper = ({
   markMostRecentlyInsertedLink,
   pluginInjectionApi,
   setOverlayHoveredStyles,
-  url
+  url,
+  view
 }) => {
   var _cardContext$value2;
   const [isHovered, setIsHovered] = useState(false);
@@ -71,15 +72,13 @@ export const AwarenessWrapper = ({
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   const cardWithOverlay = useMemo(() => {
+    if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+      return jsx(OverlayWrapper, {
+        targetElementPos: linkPosition,
+        view: view
+      }, children);
+    }
     if (shouldShowLinkOverlay) {
-      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
-        return jsx(LeftIconOverlay, {
-          isSelected: isSelected,
-          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-          onMouseEnter: () => handleOverlayChange(true),
-          onMouseLeave: () => handleOverlayChange(false)
-        }, children);
-      }
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -89,7 +88,7 @@ export const AwarenessWrapper = ({
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, view, linkPosition, handleOverlayChange]);
   return useMemo(() => {
     var _cardContext$value;
     return (

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

@@ -0,0 +1,29 @@
+/** @jsx jsx */
+import { useState } from 'react';
+
+// not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { OverlayButton } from '@atlaskit/editor-common/link';
+const ConfigureOverlayWrapperStyles = css({
+  position: 'relative',
+  left: "var(--ds-space-025, 2px)"
+});
+const OverlayWrapper = ({
+  view,
+  targetElementPos,
+  children
+}) => {
+  const [showConfigureButton, setShowConfigureButton] = useState(false);
+  return jsx("span", {
+    onMouseEnter: () => setShowConfigureButton(true),
+    onMouseLeave: () => setShowConfigureButton(false),
+    "data-testid": "inline-card-overlay-wrapper"
+  }, jsx("span", {
+    css: ConfigureOverlayWrapperStyles
+  }, showConfigureButton && jsx(OverlayButton, {
+    editorView: view,
+    targetElementPos: targetElementPos
+  })), children);
+};
+export default OverlayWrapper;

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -119,14 +119,15 @@ var InlineCard = function InlineCard(_ref) {
       isResolvedViewRendered: isResolvedViewRendered,
       markMostRecentlyInsertedLink: markMostRecentlyInsertedLink,
       pluginInjectionApi: pluginInjectionApi,
-      setOverlayHoveredStyles: setOverlayHoveredStyles
+      setOverlayHoveredStyles: setOverlayHoveredStyles,
+      view: view
     }, innerCard) :
     /*#__PURE__*/
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     React.createElement("span", {
       className: "card"
     }, innerCard);
-  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url]);
+  }, [cardContext, getPos, innerCard, isHovered, isInserted, isOverlayEnabled, isPulseEnabled, isResolvedViewRendered, isSelected, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view]);
 
   // [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

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

@@ -9,8 +9,8 @@ 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 OverlayWrapper from '../ConfigureOverlay';
 import InlineCardOverlay from '../InlineCardOverlay';
-import LeftIconOverlay from '../LeftIconOverlay';
 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
@@ -33,7 +33,8 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     markMostRecentlyInsertedLink = _ref.markMostRecentlyInsertedLink,
     pluginInjectionApi = _ref.pluginInjectionApi,
     setOverlayHoveredStyles = _ref.setOverlayHoveredStyles,
-    url = _ref.url;
+    url = _ref.url,
+    view = _ref.view;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isHovered = _useState2[0],
@@ -73,19 +74,13 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
     setOverlayHoveredStyles(isHovered);
   }, [setOverlayHoveredStyles]);
   var cardWithOverlay = useMemo(function () {
+    if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+      return jsx(OverlayWrapper, {
+        targetElementPos: linkPosition,
+        view: view
+      }, children);
+    }
     if (shouldShowLinkOverlay) {
-      if (getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
-        return jsx(LeftIconOverlay, {
-          isSelected: isSelected,
-          isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
-          onMouseEnter: function onMouseEnter() {
-            return handleOverlayChange(true);
-          },
-          onMouseLeave: function onMouseLeave() {
-            return handleOverlayChange(false);
-          }
-        }, children);
-      }
       return jsx(InlineCardOverlay, {
         isSelected: isSelected,
         isVisible: isResolvedViewRendered && (isInserted || isHovered || isSelected),
@@ -99,7 +94,7 @@ export var AwarenessWrapper = function AwarenessWrapper(_ref) {
       }, children);
     }
     return children;
-  }, [shouldShowLinkOverlay, isSelected, isResolvedViewRendered, isInserted, isHovered, url, children, handleOverlayChange]);
+  }, [shouldShowLinkOverlay, children, isSelected, isResolvedViewRendered, isInserted, isHovered, url, view, linkPosition, handleOverlayChange]);
   return useMemo(function () {
     var _cardContext$value;
     return (

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

@@ -0,0 +1,36 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/** @jsx jsx */
+import { useState } from 'react';
+
+// not permitted to migrate atlaskit packages to compiled yet, see https://hello.atlassian.net/wiki/spaces/UAF/pages/3006969423/Migrating+AFM+platform+components+to+Compiled+a+guide
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled
+import { css, jsx } from '@emotion/react';
+import { OverlayButton } from '@atlaskit/editor-common/link';
+var ConfigureOverlayWrapperStyles = css({
+  position: 'relative',
+  left: "var(--ds-space-025, 2px)"
+});
+var OverlayWrapper = function OverlayWrapper(_ref) {
+  var view = _ref.view,
+    targetElementPos = _ref.targetElementPos,
+    children = _ref.children;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showConfigureButton = _useState2[0],
+    setShowConfigureButton = _useState2[1];
+  return jsx("span", {
+    onMouseEnter: function onMouseEnter() {
+      return setShowConfigureButton(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setShowConfigureButton(false);
+    },
+    "data-testid": "inline-card-overlay-wrapper"
+  }, jsx("span", {
+    css: ConfigureOverlayWrapperStyles
+  }, showConfigureButton && jsx(OverlayButton, {
+    editorView: view,
+    targetElementPos: targetElementPos
+  })), children);
+};
+export default OverlayWrapper;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from '../../nodeviews/genericCard';
 type AwarenessWrapperProps = {
     isInserted?: boolean;
@@ -8,6 +9,7 @@ type AwarenessWrapperProps = {
     markMostRecentlyInsertedLink: (isLinkMostRecentlyInserted: boolean) => void;
     setOverlayHoveredStyles: (isHovered: boolean) => void;
     url: string;
+    view: EditorView;
 } & Partial<SmartCardProps>;
-export declare const AwarenessWrapper: ({ cardContext, children, getPos, isInserted, isOverlayEnabled, isSelected, isResolvedViewRendered, isPulseEnabled, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, }: AwarenessWrapperProps) => jsx.JSX.Element;
+export declare const AwarenessWrapper: ({ cardContext, children, getPos, isInserted, isOverlayEnabled, isSelected, isResolvedViewRendered, isPulseEnabled, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view, }: AwarenessWrapperProps) => jsx.JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+declare const OverlayWrapper: ({ view, targetElementPos, children, }: {
+    view: EditorView;
+    targetElementPos: number | undefined;
+    children: JSX.Element;
+}) => jsx.JSX.Element;
+export default OverlayWrapper;

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { jsx } from '@emotion/react';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from '../../nodeviews/genericCard';
 type AwarenessWrapperProps = {
     isInserted?: boolean;
@@ -8,6 +9,7 @@ type AwarenessWrapperProps = {
     markMostRecentlyInsertedLink: (isLinkMostRecentlyInserted: boolean) => void;
     setOverlayHoveredStyles: (isHovered: boolean) => void;
     url: string;
+    view: EditorView;
 } & Partial<SmartCardProps>;
-export declare const AwarenessWrapper: ({ cardContext, children, getPos, isInserted, isOverlayEnabled, isSelected, isResolvedViewRendered, isPulseEnabled, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, }: AwarenessWrapperProps) => jsx.JSX.Element;
+export declare const AwarenessWrapper: ({ cardContext, children, getPos, isInserted, isOverlayEnabled, isSelected, isResolvedViewRendered, isPulseEnabled, markMostRecentlyInsertedLink, pluginInjectionApi, setOverlayHoveredStyles, url, view, }: AwarenessWrapperProps) => jsx.JSX.Element;
 export {};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import { type EditorView } from '@atlaskit/editor-prosemirror/view';
+declare const OverlayWrapper: ({ view, targetElementPos, children, }: {
+    view: EditorView;
+    targetElementPos: number | undefined;
+    children: JSX.Element;
+}) => jsx.JSX.Element;
+export default OverlayWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.2.2",
+	"version": "2.3.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -69,7 +69,7 @@
 		"raf-schd": "^4.0.3"
 	},
 	"peerDependencies": {
-		"@atlaskit/link-provider": "^1.10.0",
+		"@atlaskit/link-provider": "^1.12.0",
 		"react": "^16.8.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"
 	},