@atlaskit/editor-plugin-card 13.1.1 → 13.1.2

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-card
 
+## 13.1.2
+
+### Patch Changes
+
+- [`2116707c51d9b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2116707c51d9b) -
+  [ux] Add SmartLinkDraggable wrapping to BlockCard and EmbedCard. Add stopEvent to prevent
+  ProseMirror from intercepting drag events on smart-element-link. Remove double feature gating in
+  inlineCard.
+- Updated dependencies
+
 ## 13.1.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -19,6 +19,8 @@ var _browser = require("@atlaskit/editor-common/browser");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
@@ -144,9 +146,13 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
       }), this.gapCursorSpan());
       // [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 /*#__PURE__*/_react.default.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+      return /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
+        url: url,
+        appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.BLOCK,
+        source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR
+      }, /*#__PURE__*/_react.default.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
         value: cardContext.value
-      }, cardInner) : data ? cardInner : null);
+      }, cardInner) : data ? cardInner : null));
     }
   }]);
 }(_react.default.PureComponent);
@@ -225,6 +231,23 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         provider: provider
       });
     }
+
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (event.type === 'dragstart') {
+        var target = event.target;
+        if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && (0, _platformFeatureFlags.fg)('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/cjs/nodeviews/embedCard.js

@@ -23,6 +23,8 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
 var _utils = require("@atlaskit/editor-common/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react");
 var _smartCard = require("@atlaskit/smart-card");
 var _ssr = require("@atlaskit/smart-card/ssr");
@@ -379,7 +381,11 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         actionOptions: actionOptions,
         CompetitorPrompt: CompetitorPrompt
       });
-      return /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
+      return /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
+        url: url,
+        appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.EMBED,
+        source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR
+      }, /*#__PURE__*/_react.default.createElement(_smartCard.EmbedResizeMessageListener, {
         embedIframeRef: this.embedIframeRef,
         onHeightUpdate: this.onHeightUpdate
       }, /*#__PURE__*/_react.default.createElement(CardInner, {
@@ -397,7 +403,7 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         heightAlone: heightAlone,
         cardProps: cardProps,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent
-      }));
+      })));
     }
   }]);
 }(_react.default.PureComponent);
@@ -521,6 +527,23 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         provider: provider
       });
     }
+
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (event.type === 'dragstart') {
+        var target = event.target;
+        if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && (0, _platformFeatureFlags.fg)('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/cjs/nodeviews/inlineCard.js

@@ -222,11 +222,11 @@ function InlineCardNodeView(props) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
-  return (0, _expValEquals.expValEquals)('cc_drag_and_drop_smart_link_from_content_to_tree', 'isEnabled', true) ? /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
+  return /*#__PURE__*/_react.default.createElement(_editorSmartLinkDraggable.SmartLinkDraggable, {
     url: url,
     appearance: _editorSmartLinkDraggable.SMART_LINK_APPEARANCE.INLINE,
     source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.EDITOR
-  }, inlineCardContent) : inlineCardContent;
+  }, inlineCardContent);
 }
 var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref5) {
   var inlineCardViewProducer = _ref5.inlineCardViewProducer;

package/dist/es2019/nodeviews/blockCard.js

@@ -7,6 +7,8 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -128,9 +130,13 @@ export class BlockCardComponent extends React.PureComponent {
     }), this.gapCursorSpan());
     // [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 /*#__PURE__*/React.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+    return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+      url: url,
+      appearance: SMART_LINK_APPEARANCE.BLOCK,
+      source: SMART_LINK_DRAG_TYPES.EDITOR
+    }, /*#__PURE__*/React.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
       value: cardContext.value
-    }, cardInner) : data ? cardInner : null);
+    }, cardInner) : data ? cardInner : null));
   }
 }
 const WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
@@ -190,6 +196,21 @@ export class BlockCard extends ReactNodeView {
       provider: provider
     });
   }
+
+  /**
+   * Prevent ProseMirror from handling drag events on the smart-element-link,
+   * allowing native drag to work so SmartLinkDraggable can intercept it.
+   * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+   */
+  stopEvent(event) {
+    if (event.type === 'dragstart') {
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && fg('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+        return true;
+      }
+    }
+    return false;
+  }
   destroy() {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);

package/dist/es2019/nodeviews/embedCard.js

@@ -11,6 +11,8 @@ import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedB
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
@@ -371,7 +373,11 @@ export class EmbedCardComponent extends React.PureComponent {
       actionOptions: actionOptions,
       CompetitorPrompt: CompetitorPrompt
     });
-    return /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
+    return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+      url: url,
+      appearance: SMART_LINK_APPEARANCE.EMBED,
+      source: SMART_LINK_DRAG_TYPES.EDITOR
+    }, /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
       embedIframeRef: this.embedIframeRef,
       onHeightUpdate: this.onHeightUpdate
     }, /*#__PURE__*/React.createElement(CardInner, {
@@ -389,7 +395,7 @@ export class EmbedCardComponent extends React.PureComponent {
       heightAlone: heightAlone,
       cardProps: cardProps,
       dispatchAnalyticsEvent: dispatchAnalyticsEvent
-    }));
+    })));
   }
 }
 export const EmbedOrBlockCardComponent = props => {
@@ -495,6 +501,21 @@ export class EmbedCard extends ReactNodeView {
       provider: provider
     });
   }
+
+  /**
+   * Prevent ProseMirror from handling drag events on the smart-element-link,
+   * allowing native drag to work so SmartLinkDraggable can intercept it.
+   * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+   */
+  stopEvent(event) {
+    if (event.type === 'dragstart') {
+      const target = event.target;
+      if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && fg('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+        return true;
+      }
+    }
+    return false;
+  }
   destroy() {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);

package/dist/es2019/nodeviews/inlineCard.js

@@ -221,11 +221,11 @@ export function InlineCardNodeView(props) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
-  return expValEquals('cc_drag_and_drop_smart_link_from_content_to_tree', 'isEnabled', true) ? /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+  return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
     url: url,
     appearance: SMART_LINK_APPEARANCE.INLINE,
     source: SMART_LINK_DRAG_TYPES.EDITOR
-  }, inlineCardContent) : inlineCardContent;
+  }, inlineCardContent);
 }
 export const inlineCardNodeView = ({
   inlineCardViewProducer

package/dist/esm/nodeviews/blockCard.js

@@ -16,6 +16,8 @@ import { browser as browserLegacy, getBrowserInfo } from '@atlaskit/editor-commo
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
@@ -139,9 +141,13 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
       }), this.gapCursorSpan());
       // [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 /*#__PURE__*/React.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+      return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+        url: url,
+        appearance: SMART_LINK_APPEARANCE.BLOCK,
+        source: SMART_LINK_DRAG_TYPES.EDITOR
+      }, /*#__PURE__*/React.createElement("div", null, cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
         value: cardContext.value
-      }, cardInner) : data ? cardInner : null);
+      }, cardInner) : data ? cardInner : null));
     }
   }]);
 }(React.PureComponent);
@@ -220,6 +226,23 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         provider: provider
       });
     }
+
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (event.type === 'dragstart') {
+        var target = event.target;
+        if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && fg('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/esm/nodeviews/embedCard.js

@@ -22,6 +22,8 @@ import { findOverflowScrollParent, MediaSingle as RichMediaWrapper, UnsupportedB
 import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
 import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-common/utils';
 import { akEditorFullPageNarrowBreakout, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPEARANCE } from '@atlaskit/editor-smart-link-draggable';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
 import { CardSSR } from '@atlaskit/smart-card/ssr';
@@ -373,7 +375,11 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         actionOptions: actionOptions,
         CompetitorPrompt: CompetitorPrompt
       });
-      return /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
+      return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+        url: url,
+        appearance: SMART_LINK_APPEARANCE.EMBED,
+        source: SMART_LINK_DRAG_TYPES.EDITOR
+      }, /*#__PURE__*/React.createElement(EmbedResizeMessageListener, {
         embedIframeRef: this.embedIframeRef,
         onHeightUpdate: this.onHeightUpdate
       }, /*#__PURE__*/React.createElement(CardInner, {
@@ -391,7 +397,7 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         heightAlone: heightAlone,
         cardProps: cardProps,
         dispatchAnalyticsEvent: dispatchAnalyticsEvent
-      }));
+      })));
     }
   }]);
 }(React.PureComponent);
@@ -515,6 +521,23 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
         provider: provider
       });
     }
+
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+  }, {
+    key: "stopEvent",
+    value: function stopEvent(event) {
+      if (event.type === 'dragstart') {
+        var target = event.target;
+        if (target instanceof HTMLElement && target.closest('[data-smart-element-link]') && fg('cc_drag_and_drop_smart_link_from_content_to_tree')) {
+          return true;
+        }
+      }
+      return false;
+    }
   }, {
     key: "destroy",
     value: function destroy() {

package/dist/esm/nodeviews/inlineCard.js

@@ -210,11 +210,11 @@ export function InlineCardNodeView(props) {
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
   }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, mode === 'view'))), CompetitorPromptComponent);
-  return expValEquals('cc_drag_and_drop_smart_link_from_content_to_tree', 'isEnabled', true) ? /*#__PURE__*/React.createElement(SmartLinkDraggable, {
+  return /*#__PURE__*/React.createElement(SmartLinkDraggable, {
     url: url,
     appearance: SMART_LINK_APPEARANCE.INLINE,
     source: SMART_LINK_DRAG_TYPES.EDITOR
-  }, inlineCardContent) : inlineCardContent;
+  }, inlineCardContent);
 }
 export var inlineCardNodeView = function inlineCardNodeView(_ref5) {
   var inlineCardViewProducer = _ref5.inlineCardViewProducer;

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

@@ -34,6 +34,12 @@ export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): React.JSX.Element;
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+    stopEvent(event: Event): boolean;
     destroy(): void;
 }
 export interface BlockCardNodeViewProperties {

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

@@ -63,6 +63,12 @@ export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     createDomRef(): HTMLElement;
     private updateContentEditable;
     render(): React.JSX.Element;
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+    stopEvent(event: Event): boolean;
     destroy(): void;
 }
 export interface EmbedCardNodeViewProperties {

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

@@ -34,6 +34,12 @@ export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
     render(): React.JSX.Element;
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+    stopEvent(event: Event): boolean;
     destroy(): void;
 }
 export interface BlockCardNodeViewProperties {

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

@@ -63,6 +63,12 @@ export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     createDomRef(): HTMLElement;
     private updateContentEditable;
     render(): React.JSX.Element;
+    /**
+     * Prevent ProseMirror from handling drag events on the smart-element-link,
+     * allowing native drag to work so SmartLinkDraggable can intercept it.
+     * @see {@link https://prosemirror.net/docs/ref/#view.NodeView.stopEvent}
+     */
+    stopEvent(event: Event): boolean;
     destroy(): void;
 }
 export interface EmbedCardNodeViewProperties {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "13.1.1",
+	"version": "13.1.2",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -111,6 +111,9 @@
 		}
 	},
 	"platform-feature-flags": {
+		"cc_drag_and_drop_smart_link_from_content_to_tree": {
+			"type": "boolean"
+		},
 		"confluence-issue-terminology-refresh": {
 			"type": "boolean"
 		},