@atlaskit/editor-plugin-card 2.4.1 → 2.5.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/editor-plugin-card
 
+## 2.5.0
+
+### Minor Changes
+
+- [#119135](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119135)
+  [`a4a41c5e54071`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a4a41c5e54071) -
+  Allow smart links to navigate in live pages edit view
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.4
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 2.4.2
+
+### Patch Changes
+
+- [#117973](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/117973)
+  [`6e37bac62083f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6e37bac62083f) -
+  moved one const, added new entry point for other and deprecated
+- Updated dependencies
+
 ## 2.4.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/genericCard.js

@@ -45,6 +45,19 @@ var WithClickHandler = function WithClickHandler(_ref) {
       } catch (_unused) {}
     }
   }, [url, onClickCallback]);
+  if ((0, _platformFeatureFlags.fg)('platform.linking-platform.smart-links-in-live-pages')) {
+    /**
+     * @todo: Add a check to determine if we're currently in a live page once ED-23920 and plugin
+     * is complete. The logic for which should allow navigation if we're in a live page and no callback
+     * has been provided. E.g.
+     *
+     * const allowNavigation = isLivePage && !onClickCallback;
+     */
+    var _allowNavigation = !onClickCallback;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children({
+      onClick: _allowNavigation ? undefined : onClick
+    }));
+  }
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
@@ -68,7 +81,6 @@ function Card(SmartCardComponent, UnsupportedComponent) {
       (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
         isError: false
       });
-      (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onClick", function () {});
       return _this;
     }
     (0, _createClass2.default)(_class, [{
@@ -107,7 +119,7 @@ function Card(SmartCardComponent, UnsupportedComponent) {
             // Below is added for the future implementation of Linking Platform namespaced analytics context
             location: analyticsEditorAppearance
           }
-        }, (0, _platformFeatureFlags.fg)('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/_react.default.createElement(WithClickHandler, {
+        }, /*#__PURE__*/_react.default.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
           url: url
@@ -119,12 +131,7 @@ function Card(SmartCardComponent, UnsupportedComponent) {
           }, _this2.props, {
             onClick: onClick
           }));
-        }) : /*#__PURE__*/_react.default.createElement(SmartCardComponent, (0, _extends2.default)({
-          key: url,
-          cardContext: cardContext
-        }, this.props, {
-          onClick: this.onClick
-        })));
+        }));
       }
     }, {
       key: "componentDidCatch",

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

@@ -15,10 +15,10 @@ var _react2 = require("@emotion/react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _utils = require("@atlaskit/editor-common/utils");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
 var _colors = require("@atlaskit/theme/colors");
-var _utils2 = require("./utils");
+var _utils = require("./utils");
 var _excluded = ["children", "isSelected", "isVisible", "testId", "url"];
 var _active;
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
@@ -140,17 +140,17 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
     if (!containerRef.current || !maxOverlayWidth.current) {
       return;
     }
-    var marker = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
+    var marker = (0, _utils.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
     if (!marker) {
       return;
     }
     try {
-      var oneLine = (0, _utils2.isOneLine)(containerRef.current, marker);
+      var oneLine = (0, _utils.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 = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
+      var _availableWidth = (0, _utils.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);
@@ -175,16 +175,16 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
 
     // This should run only once
     if (!maxOverlayWidth.current) {
-      var iconAndLabel = (0, _utils2.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
-      var _label = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
+      var iconAndLabel = (0, _utils.getChildElement)(containerRef, ".".concat(ICON_AND_LABEL_CLASSNAME));
+      var _label = (0, _utils.getChildElement)(containerRef, ".".concat(OVERLAY_LABEL_CLASSNAME));
       if (iconAndLabel && _label) {
         // Set overlay max (label + icon) and min (icon only) width.
-        var _getOverlayWidths = (0, _utils2.getOverlayWidths)(iconAndLabel, _label),
+        var _getOverlayWidths = (0, _utils.getOverlayWidths)(iconAndLabel, _label),
           max = _getOverlayWidths.max,
           min = _getOverlayWidths.min;
         maxOverlayWidth.current = max;
         minOverlayWidth.current = min;
-        iconSize.current = (0, _utils2.getIconSize)(_label);
+        iconSize.current = (0, _utils.getIconSize)(_label);
       }
     }
     if (isVisible) {
@@ -230,7 +230,7 @@ var InlineCardOverlay = function InlineCardOverlay(_ref) {
   }), children, isVisible && (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
     "aria-hidden": "true",
     className: OVERLAY_MARKER_CLASSNAME
-  }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
+  }, _whitespace.ZERO_WIDTH_JOINER), (0, _react2.jsx)("a", {
     css: [overlayStyles, showOverlay && showOverlayStyles],
     style: {
       // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview

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

@@ -14,11 +14,11 @@ var _react2 = require("@emotion/react");
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
 var _reactIntlNext = require("react-intl-next");
 var _messages = require("@atlaskit/editor-common/messages");
-var _utils = require("@atlaskit/editor-common/utils");
+var _whitespace = require("@atlaskit/editor-common/whitespace");
 var _preferences = _interopRequireDefault(require("@atlaskit/icon/glyph/preferences"));
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-var _utils2 = require("../InlineCardOverlay/utils");
+var _utils = require("../InlineCardOverlay/utils");
 var _excluded = ["children", "isSelected", "isVisible", "testId"];
 /* eslint-disable @atlaskit/design-system/no-nested-styles */
 /* eslint-disable @atlaskit/design-system/prefer-primitives */
@@ -114,17 +114,17 @@ var LeftIconOverlay = function LeftIconOverlay(_ref) {
     if (!containerRef.current) {
       return;
     }
-    var marker = (0, _utils2.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
+    var marker = (0, _utils.getChildElement)(containerRef, ".".concat(OVERLAY_MARKER_CLASSNAME));
     if (!marker) {
       return;
     }
     try {
-      var oneLine = (0, _utils2.isOneLine)(containerRef.current, marker);
+      var oneLine = (0, _utils.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 = (0, _utils2.getInlineCardAvailableWidth)(containerRef.current, marker) - PADDING_IN_PX - (
+      var _availableWidth = (0, _utils.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);
@@ -178,7 +178,7 @@ var LeftIconOverlay = function LeftIconOverlay(_ref) {
     return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
       "aria-hidden": "true",
       className: OVERLAY_MARKER_CLASSNAME
-    }, _utils.ZERO_WIDTH_JOINER), (0, _react2.jsx)("span", {
+    }, _whitespace.ZERO_WIDTH_JOINER), (0, _react2.jsx)("span", {
       css: [overlayStyles, showOverlay && showOverlayStyles],
       tabIndex: -1,
       "data-testid": testId

package/dist/es2019/nodeviews/genericCard.js

@@ -29,6 +29,19 @@ const WithClickHandler = ({
       } catch {}
     }
   }, [url, onClickCallback]);
+  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+    /**
+     * @todo: Add a check to determine if we're currently in a live page once ED-23920 and plugin
+     * is complete. The logic for which should allow navigation if we're in a live page and no callback
+     * has been provided. E.g.
+     *
+     * const allowNavigation = isLivePage && !onClickCallback;
+     */
+    const allowNavigation = !onClickCallback;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+      onClick: allowNavigation ? undefined : onClick
+    }));
+  }
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
@@ -45,7 +58,6 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       _defineProperty(this, "state", {
         isError: false
       });
-      _defineProperty(this, "onClick", () => {});
     }
     render() {
       var _getPluginState;
@@ -82,7 +94,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
           // Below is added for the future implementation of Linking Platform namespaced analytics context
           location: analyticsEditorAppearance
         }
-      }, fg('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/React.createElement(WithClickHandler, {
+      }, /*#__PURE__*/React.createElement(WithClickHandler, {
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback,
         url: url
@@ -93,12 +105,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
         cardContext: cardContext
       }, this.props, {
         onClick: onClick
-      }))) : /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
-        key: url,
-        cardContext: cardContext
-      }, this.props, {
-        onClick: this.onClick
-      })));
+      }))));
     }
     componentDidCatch(error) {
       const maybeAPIError = error;

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

@@ -9,7 +9,7 @@ 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 { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';

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

@@ -9,7 +9,7 @@ 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 { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/dist/esm/nodeviews/genericCard.js

@@ -35,6 +35,19 @@ var WithClickHandler = function WithClickHandler(_ref) {
       } catch (_unused) {}
     }
   }, [url, onClickCallback]);
+  if (fg('platform.linking-platform.smart-links-in-live-pages')) {
+    /**
+     * @todo: Add a check to determine if we're currently in a live page once ED-23920 and plugin
+     * is complete. The logic for which should allow navigation if we're in a live page and no callback
+     * has been provided. E.g.
+     *
+     * const allowNavigation = isLivePage && !onClickCallback;
+     */
+    var _allowNavigation = !onClickCallback;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children({
+      onClick: _allowNavigation ? undefined : onClick
+    }));
+  }
 
   // Setting `onClick` to `undefined` ensures clicks on smartcards navigate to the URL.
   // If in view mode and not overriding with onClickCallback option, then allow smartlinks to navigate on click.
@@ -58,7 +71,6 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
       _defineProperty(_assertThisInitialized(_this), "state", {
         isError: false
       });
-      _defineProperty(_assertThisInitialized(_this), "onClick", function () {});
       return _this;
     }
     _createClass(_class, [{
@@ -97,7 +109,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
             // Below is added for the future implementation of Linking Platform namespaced analytics context
             location: analyticsEditorAppearance
           }
-        }, fg('platform.linking-platform.smart-card.on-click-callback') ? /*#__PURE__*/React.createElement(WithClickHandler, {
+        }, /*#__PURE__*/React.createElement(WithClickHandler, {
           pluginInjectionApi: pluginInjectionApi,
           onClickCallback: onClickCallback,
           url: url
@@ -109,12 +121,7 @@ export function Card(SmartCardComponent, UnsupportedComponent) {
           }, _this2.props, {
             onClick: onClick
           }));
-        }) : /*#__PURE__*/React.createElement(SmartCardComponent, _extends({
-          key: url,
-          cardContext: cardContext
-        }, this.props, {
-          onClick: this.onClick
-        })));
+        }));
       }
     }, {
       key: "componentDidCatch",

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

@@ -14,7 +14,7 @@ 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 { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { B100, N0, N700 } from '@atlaskit/theme/colors';
 import { getChildElement, getIconSize, getInlineCardAvailableWidth, getOverlayWidths, isOneLine } from './utils';

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

@@ -12,7 +12,7 @@ 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 { ZERO_WIDTH_JOINER } from '@atlaskit/editor-common/whitespace';
 import PreferencesIcon from '@atlaskit/icon/glyph/preferences';
 import { N0, N30A, N40A, N60A, N700 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.4.1",
+	"version": "2.5.0",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,10 +34,10 @@
 	"dependencies": {
 		"@atlaskit/adf-schema": "^39.0.3",
 		"@atlaskit/analytics-next": "^9.3.0",
-		"@atlaskit/button": "^18.1.0",
+		"@atlaskit/button": "^18.3.0",
 		"@atlaskit/custom-steps": "^0.4.0",
 		"@atlaskit/dropdown-menu": "^12.14.0",
-		"@atlaskit/editor-common": "^84.0.0",
+		"@atlaskit/editor-common": "^84.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.4.0",
 		"@atlaskit/editor-plugin-decorations": "^1.1.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.1.0",
@@ -47,17 +47,17 @@
 		"@atlaskit/editor-plugin-grid": "^1.1.0",
 		"@atlaskit/editor-plugin-width": "^1.1.0",
 		"@atlaskit/editor-prosemirror": "4.0.1",
-		"@atlaskit/editor-shared-styles": "^2.12.0",
+		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
-		"@atlaskit/icon": "^22.5.0",
+		"@atlaskit/icon": "^22.6.0",
 		"@atlaskit/link-analytics": "^8.3.0",
 		"@atlaskit/link-client-extension": "^1.9.0",
 		"@atlaskit/link-datasource": "^2.5.0",
 		"@atlaskit/linking-common": "^5.7.0",
 		"@atlaskit/linking-types": "^8.9.0",
-		"@atlaskit/menu": "2.7.1",
+		"@atlaskit/menu": "2.7.4",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/primitives": "^10.0.0",
+		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/smart-card": "^27.9.0",
 		"@atlaskit/theme": "^12.11.0",
 		"@atlaskit/tokens": "^1.53.0",
@@ -131,9 +131,6 @@
 		"platform.editor.card.inject-settings-button": {
 			"type": "boolean"
 		},
-		"platform.linking-platform.smart-card.on-click-callback": {
-			"type": "boolean"
-		},
 		"platform.linking-platform.editor-datasource-typeguards": {
 			"type": "boolean"
 		},