@atlaskit/editor-plugin-card 4.5.17 → 4.5.19

package/dist/esm/nodeviews/inlineCard.js

@@ -1,14 +1,16 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import rafSchedule from 'raf-schd';
+import uuid from 'uuid/v4';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { handleNavigation } from '@atlaskit/editor-common/link';
 import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard } from '../pm-plugins/actions';
+import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
+import { registerCard, removeCard } from '../pm-plugins/actions';
 import { getAwarenessProps } from '../pm-plugins/utils';
 import OverlayWrapper from '../ui/ConfigureOverlay';
 import { Card } from './genericCard';
@@ -28,6 +30,19 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
+  var refId = useRef(uuid());
+  useEffect(function () {
+    var id = refId.current;
+    return function () {
+      if (fg('platform_editor_fix_card_plugin_state')) {
+        var tr = view.state.tr;
+        removeCard({
+          id: id
+        })(tr);
+        view.dispatch(tr);
+      }
+    };
+  }, [getPos, view]);
   var scrollContainer = useMemo(
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -52,7 +67,8 @@ export var InlineCard = /*#__PURE__*/memo(function (_ref) {
       registerCard({
         title: title,
         url: url,
-        pos: pos
+        pos: pos,
+        id: refId.current
       })(tr);
       onRes === null || onRes === void 0 || onRes(tr, title);
       view.dispatch(tr);
@@ -154,7 +170,7 @@ export function InlineCardNodeView(props) {
     onClickCallback: onClickCallback
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
+  }, enableInlineUpgradeFeatures && getAwarenessProps(view.state, getPos, allowEmbeds, allowBlockCards, !editorExperiment('live_pages_graceful_edit', 'control') ? true : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
 }
 export var inlineCardNodeView = function inlineCardNodeView(_ref2) {
   var inlineCardViewProducer = _ref2.inlineCardViewProducer;

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -1,6 +1,8 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { memo, useCallback, useMemo, useState } from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { registerRemoveOverlay } from '../pm-plugins/actions';
+import { pluginKey } from '../pm-plugins/plugin-key';
 import { AwarenessWrapper } from '../ui/AwarenessWrapper';
 import { InlineCard } from './inlineCard';
 export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
@@ -28,9 +30,22 @@ export var InlineCardWithAwareness = /*#__PURE__*/memo(function (_ref) {
     isResolvedViewRendered = _useState6[0],
     setIsResolvedViewRendered = _useState6[1];
   var onResolve = useCallback(function (tr, title) {
-    registerRemoveOverlay(function () {
-      return setIsInserted(false);
-    })(tr);
+    if (fg('platform_editor_fix_card_plugin_state')) {
+      var metadata = tr.getMeta(pluginKey);
+      if (metadata && metadata.type === 'REGISTER') {
+        registerRemoveOverlay(function () {
+          return setIsInserted(false);
+        }, metadata.info)(tr);
+      } else {
+        registerRemoveOverlay(function () {
+          return setIsInserted(false);
+        })(tr);
+      }
+    } else {
+      registerRemoveOverlay(function () {
+        return setIsInserted(false);
+      })(tr);
+    }
     if (title) {
       setIsResolvedViewRendered(true);
     }

package/dist/esm/pm-plugins/actions.js

@@ -26,11 +26,20 @@ export var registerCard = function registerCard(info) {
     });
   };
 };
-export var registerRemoveOverlay = function registerRemoveOverlay(callback) {
+export var removeCard = function removeCard(info) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'REMOVE_CARD',
+      info: info
+    });
+  };
+};
+export var registerRemoveOverlay = function registerRemoveOverlay(callback, info) {
   return function (tr) {
     return cardAction(tr, {
       type: 'REGISTER_REMOVE_OVERLAY_ON_INSERTED_LINK',
-      callback: callback
+      callback: callback,
+      info: info
     });
   };
 };

package/dist/esm/pm-plugins/reducers.js

@@ -28,6 +28,13 @@ var register = function register(state, action) {
     }).concat(action.info)
   });
 };
+var removeCard = function removeCard(state, action) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    cards: state.cards.filter(function (card) {
+      return card.id !== action.info.id;
+    })
+  });
+};
 var setProvider = function setProvider(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
     provider: action.provider
@@ -78,6 +85,10 @@ var clearOverlayCandidate = function clearOverlayCandidate(state) {
 };
 var registerRemoveOverlayOnInsertedLink = function registerRemoveOverlayOnInsertedLink(state, action) {
   return _objectSpread(_objectSpread({}, state), {}, {
+    cards: action.info ? state.cards.filter(function (card) {
+      var _action$info;
+      return card.pos !== ((_action$info = action.info) === null || _action$info === void 0 ? void 0 : _action$info.pos);
+    }).concat(action.info) : state.cards,
     removeOverlay: action.callback
   });
 };
@@ -107,6 +118,8 @@ export default (function (state, action) {
       return resolve(state, action);
     case 'REGISTER':
       return register(state, action);
+    case 'REMOVE_CARD':
+      return removeCard(state, action);
     case 'REGISTER_EVENTS':
       return registerEvents(state, action);
     case 'SET_DATASOURCE_TABLE_REF':

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

@@ -5,28 +5,34 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Datasource } from '../nodeviews/datasource';
 import type { SmartCardProps } from './genericCard';
-export declare class BlockCardComponent extends React.PureComponent<SmartCardProps> {
+export declare class BlockCardComponent extends React.PureComponent<SmartCardProps & {
+    id?: string;
+}> {
     private scrollContainer?;
-    constructor(props: SmartCardProps);
+    constructor(props: SmartCardProps & {
+        id?: string;
+    });
     onResolve: (data: {
         url?: string | undefined;
         title?: string | undefined;
     }) => void;
-    gapCursorSpan: () => JSX.Element | undefined;
+    gapCursorSpan: () => React.JSX.Element | undefined;
     onError: ({ err }: {
         err?: Error | undefined;
     }) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'actionOptions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    private id;
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
     private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     destroy(): void;
+    private removeCard;
 }
 export interface BlockCardNodeViewProperties {
     pmPluginFactoryParams: PMPluginFactoryParams;

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

@@ -11,10 +11,14 @@ export type EmbedCardState = {
     liveHeight?: number;
     initialAspectRatio?: number;
 };
-export declare class EmbedCardComponent extends React.PureComponent<SmartCardProps, EmbedCardState> {
+export declare class EmbedCardComponent extends React.PureComponent<SmartCardProps & {
+    id?: string;
+}, EmbedCardState> {
     private scrollContainer?;
     private embedIframeRef;
-    constructor(props: SmartCardProps);
+    constructor(props: SmartCardProps & {
+        id?: string;
+    });
     state: EmbedCardState;
     private getPosSafely;
     onResolve: (data: {
@@ -34,16 +38,18 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     onError: ({ err }: {
         err?: Error | undefined;
     }) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    private id;
     unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
     private updateContentEditable;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     destroy(): void;
+    private removeCard;
 }
 export interface EmbedCardNodeViewProperties {
     allowResizing: EmbedCardNodeViewProps['allowResizing'];

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

@@ -46,4 +46,6 @@ export interface SmartCardProps extends CardProps {
     allowBlockCards?: boolean;
     enableInlineUpgradeFeatures?: boolean;
 }
-export declare function Card(SmartCardComponent: React.ComponentType<React.PropsWithChildren<SmartCardProps>>, UnsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>): React.ComponentType<React.PropsWithChildren<CardProps>>;
+export declare function Card(SmartCardComponent: React.ComponentType<React.PropsWithChildren<SmartCardProps & {
+    id?: string;
+}>>, UnsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>): React.ComponentType<React.PropsWithChildren<CardProps>>;

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

@@ -4,9 +4,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
-export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
+export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => React.JSX.Element | null>;
 export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage'>;
-export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
+export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): React.JSX.Element;
 export interface InlineCardNodeViewProperties {
     inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
 }

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

@@ -5,4 +5,4 @@ export type InlineCardWithAwarenessProps = {
     isOverlayEnabled?: boolean;
     isSelected?: boolean;
 };
-export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, pluginInjectionApi, onClick, isPulseEnabled, isOverlayEnabled, isSelected, }: SmartCardProps & InlineCardWithAwarenessProps) => JSX.Element>;
+export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, pluginInjectionApi, onClick, isPulseEnabled, isOverlayEnabled, isSelected, }: SmartCardProps & InlineCardWithAwarenessProps) => React.JSX.Element>;

package/dist/types/pm-plugins/actions.d.ts

@@ -9,7 +9,8 @@ export declare const cardAction: (tr: Transaction, action: CardPluginAction) =>
 export declare const resolveCard: (url: string) => (tr: Transaction) => Transaction;
 export declare const queueCards: (requests: Request[]) => (tr: Transaction) => Transaction;
 export declare const registerCard: (info: CardInfo) => (tr: Transaction) => Transaction;
-export declare const registerRemoveOverlay: (callback: () => void) => (tr: Transaction) => Transaction;
+export declare const removeCard: (info: Partial<CardInfo>) => (tr: Transaction) => Transaction;
+export declare const registerRemoveOverlay: (callback: () => void, info?: CardInfo) => (tr: Transaction) => Transaction;
 export declare const registerSmartCardEvents: (smartLinkEvents: SmartLinkEvents) => (tr: Transaction) => Transaction;
 export declare const setProvider: (cardProvider: CardProvider | null) => (tr: Transaction) => Transaction;
 export declare const setDatasourceTableRef: (datasourceTableRef?: HTMLElement) => (tr: Transaction) => Transaction;

package/dist/types/pm-plugins/util/state.d.ts

@@ -17,6 +17,7 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         pos: number;
         title?: string | undefined;
         url?: string | undefined;
+        id?: string | undefined;
     }[];
     provider: import("@atlaskit/editor-common/provider-factory").CardProvider | null;
     datasourceStash: {

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

@@ -17,6 +17,7 @@ export type DatasourceNode = Omit<Node, 'attrs'> & {
 export type CardInfo = {
     title?: string;
     url?: string;
+    id?: string;
     pos: number;
 };
 export type Request = {
@@ -123,6 +124,10 @@ export type Register = {
     type: 'REGISTER';
     info: CardInfo;
 };
+export type RemoveCard = {
+    type: 'REMOVE_CARD';
+    info: Partial<CardInfo>;
+};
 export type ShowLinkToolbar = {
     type: 'SHOW_LINK_TOOLBAR';
 };
@@ -159,6 +164,7 @@ type ClearOverlayCandidate = {
 type RegisterRemoveOverlayOnInsertedLink = {
     type: 'REGISTER_REMOVE_OVERLAY_ON_INSERTED_LINK';
     callback: () => void;
+    info?: Register['info'];
 };
 export type SetDatasourceStash = {
     type: 'SET_DATASOURCE_STASH';
@@ -171,5 +177,5 @@ export type RemoveDatasourceStash = {
     type: 'REMOVE_DATASOURCE_STASH';
     url: string;
 };
-export type CardPluginAction = SetProvider | Queue | Resolve | Register | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
+export type CardPluginAction = SetProvider | Queue | Resolve | Register | RemoveCard | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
 export {};

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import type { GlyphProps } from '@atlaskit/icon/types';
-export declare const DatasourceIcon: (props: GlyphProps) => JSX.Element;
+export declare const DatasourceIcon: (props: GlyphProps) => React.JSX.Element;

package/dist/types/ui/DatasourceModal/ModalWithState.d.ts

@@ -9,7 +9,7 @@ type ModalWithStateProps = {
     api: ExtractInjectionAPI<typeof cardPlugin> | undefined;
     editorView: EditorView;
 };
-declare const SafeModalWithState: React.MemoExoticComponent<({ api, editorView }: ModalWithStateProps) => JSX.Element>;
+declare const SafeModalWithState: React.MemoExoticComponent<({ api, editorView }: ModalWithStateProps) => React.JSX.Element>;
 export type ModalTypeToComponentMap = {
     componentType: React.ComponentType<ConfigModalProps<InlineCardAdf | DatasourceAdf, DatasourceParameters>>;
     datasourceId: string;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { CardContext } from '@atlaskit/link-provider';
@@ -8,5 +8,5 @@ type DatasourceModalProps = {
     editorAnalyticsApi?: EditorAnalyticsAPI;
     cardContext?: CardContext;
 } & ModalTypeToComponentMap;
-export declare const DatasourceModal: ({ view, cardContext, datasourceId: defaultDatasourceId, componentType: Component, }: DatasourceModalProps) => JSX.Element | null;
+export declare const DatasourceModal: ({ view, cardContext, datasourceId: defaultDatasourceId, componentType: Component, }: DatasourceModalProps) => React.JSX.Element | null;
 export {};

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

@@ -19,12 +19,12 @@ export type EditLinkToolbarProps = {
     forceFocusSelector: ForceFocusSelector | undefined;
     lpLinkPicker: boolean;
 };
-export declare function HyperlinkAddToolbarWithState({ linkPickerOptions, onSubmit, displayText, displayUrl, providerFactory, view, onCancel, invokeMethod, lpLinkPicker, onClose, onEscapeCallback, onClickAwayCallback, }: HyperlinkAddToolbarProps): JSX.Element;
+export declare function HyperlinkAddToolbarWithState({ linkPickerOptions, onSubmit, displayText, displayUrl, providerFactory, view, onCancel, invokeMethod, lpLinkPicker, onClose, onEscapeCallback, onClickAwayCallback, }: HyperlinkAddToolbarProps): React.JSX.Element;
 export declare class EditLinkToolbar extends React.Component<EditLinkToolbarProps> {
     componentDidUpdate(prevProps: EditLinkToolbarProps): void;
     componentWillUnmount(): void;
     private hideLinkToolbar;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export declare const getEditLinkCallback: (editorAnalyticsApi: EditorAnalyticsAPI | undefined, scrollIntoView: boolean) => Command;
 export declare const buildEditLinkToolbar: ({ providerFactory, node, pluginInjectionApi, linkPicker, lpLinkPicker, }: {

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

@@ -7,4 +7,4 @@ export type EditorAnalyticsContextProps = {
 /**
  * Provides location attribute to child events
  */
-export declare const EditorAnalyticsContext: ({ editorView, children }: EditorAnalyticsContextProps) => JSX.Element;
+export declare const EditorAnalyticsContext: ({ editorView, children }: EditorAnalyticsContextProps) => React.JSX.Element;

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

@@ -1,5 +1,5 @@
 import React from 'react';
 import type { AnalyticsBindingsProps } from './common';
 export declare class EditorLinkingPlatformAnalytics extends React.PureComponent<AnalyticsBindingsProps> {
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardOptions } from '@atlaskit/editor-common/card';
@@ -15,4 +15,4 @@ export interface HyperlinkToolbarAppearanceProps {
     editorAnalyticsApi: EditorAnalyticsAPI | undefined;
     editorPluginApi: ExtractInjectionAPI<CardPlugin> | undefined;
 }
-export declare function HyperlinkToolbarAppearance(props: HyperlinkToolbarAppearanceProps): JSX.Element | null;
+export declare function HyperlinkToolbarAppearance(props: HyperlinkToolbarAppearanceProps): React.JSX.Element | null;

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

@@ -18,6 +18,6 @@ export interface LinkToolbarAppearanceProps {
     isDatasourceView?: boolean;
 }
 export declare class LinkToolbarAppearance extends React.Component<LinkToolbarAppearanceProps, Object> {
-    renderDropdown: (view?: EditorView, cardContext?: CardContext) => JSX.Element | null;
-    render(): JSX.Element;
+    renderDropdown: (view?: EditorView, cardContext?: CardContext) => React.JSX.Element | null;
+    render(): React.JSX.Element;
 }

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 export type PulseDiscoveryMode = 'start' | 'iteration';
 export interface PulseProps {
     /**
@@ -21,4 +21,4 @@ export interface PulseProps {
     shouldShowPulse?: boolean;
     testId?: string;
 }
-export declare const DiscoveryPulse: ({ children, localStorageKey, localStorageKeyExpirationInMs, discoveryMode, shouldShowPulse, testId, }: PulseProps) => JSX.Element;
+export declare const DiscoveryPulse: ({ children, localStorageKey, localStorageKeyExpirationInMs, discoveryMode, shouldShowPulse, testId, }: PulseProps) => React.JSX.Element;

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

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import type { EditorAnalyticsContextProps } from './EditorAnalyticsContext';
 type ToolbarViewedEventProps = {
     url?: string;
@@ -7,5 +7,5 @@ type ToolbarViewedEventProps = {
 /**
  * Provides analytics context and card context
  */
-export declare const ToolbarViewedEvent: ({ url, display, editorView, }: ToolbarViewedEventProps & Omit<EditorAnalyticsContextProps, 'children'>) => JSX.Element;
+export declare const ToolbarViewedEvent: ({ url, display, editorView, }: ToolbarViewedEventProps & Omit<EditorAnalyticsContextProps, 'children'>) => React.JSX.Element;
 export {};

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

@@ -2,4 +2,4 @@ import React from 'react';
 import { useSmartCardContext } from '@atlaskit/link-provider';
 export declare const WithCardContext: ({ children, }: {
     children: (cardContext: ReturnType<typeof useSmartCardContext>) => React.ReactNode;
-}) => JSX.Element;
+}) => React.JSX.Element;

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

@@ -20,5 +20,5 @@ export declare class DatasourceErrorBoundary extends React.Component<DatasourceE
         error: Error | APIError;
     };
     componentDidCatch(error: Error | APIError): void;
-    render(): string | number | boolean | JSX.Element | React.ReactFragment | null | undefined;
+    render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 }

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

@@ -5,28 +5,34 @@ import type { Node } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
 import { Datasource } from '../nodeviews/datasource';
 import type { SmartCardProps } from './genericCard';
-export declare class BlockCardComponent extends React.PureComponent<SmartCardProps> {
+export declare class BlockCardComponent extends React.PureComponent<SmartCardProps & {
+    id?: string;
+}> {
     private scrollContainer?;
-    constructor(props: SmartCardProps);
+    constructor(props: SmartCardProps & {
+        id?: string;
+    });
     onResolve: (data: {
         url?: string | undefined;
         title?: string | undefined;
     }) => void;
-    gapCursorSpan: () => JSX.Element | undefined;
+    gapCursorSpan: () => React.JSX.Element | undefined;
     onError: ({ err }: {
         err?: Error | undefined;
     }) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type BlockCardNodeViewProps = Pick<SmartCardProps, 'actionOptions' | 'pluginInjectionApi' | 'onClickCallback'>;
 export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    private id;
     unsubscribe: (() => void) | undefined;
     createDomRef(): HTMLElement;
     private updateContentEditable;
     validUpdate(currentNode: Node, newNode: Node): boolean;
     update(node: Node, decorations: ReadonlyArray<Decoration>, _innerDecorations?: DecorationSource): boolean;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     destroy(): void;
+    private removeCard;
 }
 export interface BlockCardNodeViewProperties {
     pmPluginFactoryParams: PMPluginFactoryParams;

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

@@ -11,10 +11,14 @@ export type EmbedCardState = {
     liveHeight?: number;
     initialAspectRatio?: number;
 };
-export declare class EmbedCardComponent extends React.PureComponent<SmartCardProps, EmbedCardState> {
+export declare class EmbedCardComponent extends React.PureComponent<SmartCardProps & {
+    id?: string;
+}, EmbedCardState> {
     private scrollContainer?;
     private embedIframeRef;
-    constructor(props: SmartCardProps);
+    constructor(props: SmartCardProps & {
+        id?: string;
+    });
     state: EmbedCardState;
     private getPosSafely;
     onResolve: (data: {
@@ -34,16 +38,18 @@ export declare class EmbedCardComponent extends React.PureComponent<SmartCardPro
     onError: ({ err }: {
         err?: Error | undefined;
     }) => void;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
 }
 export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi' | 'actionOptions' | 'onClickCallback'>;
 export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    private id;
     unsubscribe: (() => void) | undefined;
     viewShouldUpdate(nextNode: PMNode): boolean;
     createDomRef(): HTMLElement;
     private updateContentEditable;
-    render(): JSX.Element;
+    render(): React.JSX.Element;
     destroy(): void;
+    private removeCard;
 }
 export interface EmbedCardNodeViewProperties {
     allowResizing: EmbedCardNodeViewProps['allowResizing'];

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

@@ -46,4 +46,6 @@ export interface SmartCardProps extends CardProps {
     allowBlockCards?: boolean;
     enableInlineUpgradeFeatures?: boolean;
 }
-export declare function Card(SmartCardComponent: React.ComponentType<React.PropsWithChildren<SmartCardProps>>, UnsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>): React.ComponentType<React.PropsWithChildren<CardProps>>;
+export declare function Card(SmartCardComponent: React.ComponentType<React.PropsWithChildren<SmartCardProps & {
+    id?: string;
+}>>, UnsupportedComponent: React.ComponentType<React.PropsWithChildren<unknown>>): React.ComponentType<React.PropsWithChildren<CardProps>>;

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

@@ -4,9 +4,9 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { Decoration, EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { SmartCardProps } from './genericCard';
 import { type InlineCardWithAwarenessProps } from './inlineCardWithAwareness';
-export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => JSX.Element | null>;
+export declare const InlineCard: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, onClick, onResolve: onRes, isHovered, showHoverPreview, hoverPreviewOptions, }: SmartCardProps) => React.JSX.Element | null>;
 export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'actionOptions' | 'allowEmbeds' | 'allowBlockCards' | 'enableInlineUpgradeFeatures' | 'pluginInjectionApi' | 'onClickCallback' | '__livePage'>;
-export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): JSX.Element;
+export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps & InlineCardWithAwarenessProps): React.JSX.Element;
 export interface InlineCardNodeViewProperties {
     inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
 }

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

@@ -5,4 +5,4 @@ export type InlineCardWithAwarenessProps = {
     isOverlayEnabled?: boolean;
     isSelected?: boolean;
 };
-export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, pluginInjectionApi, onClick, isPulseEnabled, isOverlayEnabled, isSelected, }: SmartCardProps & InlineCardWithAwarenessProps) => JSX.Element>;
+export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, actionOptions, useAlternativePreloader, view, getPos, pluginInjectionApi, onClick, isPulseEnabled, isOverlayEnabled, isSelected, }: SmartCardProps & InlineCardWithAwarenessProps) => React.JSX.Element>;

package/dist/types-ts4.5/pm-plugins/actions.d.ts

@@ -9,7 +9,8 @@ export declare const cardAction: (tr: Transaction, action: CardPluginAction) =>
 export declare const resolveCard: (url: string) => (tr: Transaction) => Transaction;
 export declare const queueCards: (requests: Request[]) => (tr: Transaction) => Transaction;
 export declare const registerCard: (info: CardInfo) => (tr: Transaction) => Transaction;
-export declare const registerRemoveOverlay: (callback: () => void) => (tr: Transaction) => Transaction;
+export declare const removeCard: (info: Partial<CardInfo>) => (tr: Transaction) => Transaction;
+export declare const registerRemoveOverlay: (callback: () => void, info?: CardInfo) => (tr: Transaction) => Transaction;
 export declare const registerSmartCardEvents: (smartLinkEvents: SmartLinkEvents) => (tr: Transaction) => Transaction;
 export declare const setProvider: (cardProvider: CardProvider | null) => (tr: Transaction) => Transaction;
 export declare const setDatasourceTableRef: (datasourceTableRef?: HTMLElement) => (tr: Transaction) => Transaction;

package/dist/types-ts4.5/pm-plugins/util/state.d.ts

@@ -17,6 +17,7 @@ export declare const getPluginStateWithUpdatedPos: (pluginState: CardPluginState
         pos: number;
         title?: string | undefined;
         url?: string | undefined;
+        id?: string | undefined;
     }[];
     provider: import("@atlaskit/editor-common/provider-factory").CardProvider | null;
     datasourceStash: {

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

@@ -17,6 +17,7 @@ export type DatasourceNode = Omit<Node, 'attrs'> & {
 export type CardInfo = {
     title?: string;
     url?: string;
+    id?: string;
     pos: number;
 };
 export type Request = {
@@ -123,6 +124,10 @@ export type Register = {
     type: 'REGISTER';
     info: CardInfo;
 };
+export type RemoveCard = {
+    type: 'REMOVE_CARD';
+    info: Partial<CardInfo>;
+};
 export type ShowLinkToolbar = {
     type: 'SHOW_LINK_TOOLBAR';
 };
@@ -159,6 +164,7 @@ type ClearOverlayCandidate = {
 type RegisterRemoveOverlayOnInsertedLink = {
     type: 'REGISTER_REMOVE_OVERLAY_ON_INSERTED_LINK';
     callback: () => void;
+    info?: Register['info'];
 };
 export type SetDatasourceStash = {
     type: 'SET_DATASOURCE_STASH';
@@ -171,5 +177,5 @@ export type RemoveDatasourceStash = {
     type: 'REMOVE_DATASOURCE_STASH';
     url: string;
 };
-export type CardPluginAction = SetProvider | Queue | Resolve | Register | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
+export type CardPluginAction = SetProvider | Queue | Resolve | Register | RemoveCard | ShowLinkToolbar | HideLinkToolbar | ShowDatasourceModal | HideDatasourceModal | RegisterSmartCardEvents | SetDatasourceTableRef | SetCardLayout | SetCardLayoutAndDatasourceTableRef | ClearOverlayCandidate | RegisterRemoveOverlayOnInsertedLink | SetDatasourceStash | RemoveDatasourceStash;
 export {};

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

@@ -1,3 +1,3 @@
-/// <reference types="react" />
+import React from 'react';
 import type { GlyphProps } from '@atlaskit/icon/types';
-export declare const DatasourceIcon: (props: GlyphProps) => JSX.Element;
+export declare const DatasourceIcon: (props: GlyphProps) => React.JSX.Element;

package/dist/types-ts4.5/ui/DatasourceModal/ModalWithState.d.ts

@@ -9,7 +9,7 @@ type ModalWithStateProps = {
     api: ExtractInjectionAPI<typeof cardPlugin> | undefined;
     editorView: EditorView;
 };
-declare const SafeModalWithState: React.MemoExoticComponent<({ api, editorView }: ModalWithStateProps) => JSX.Element>;
+declare const SafeModalWithState: React.MemoExoticComponent<({ api, editorView }: ModalWithStateProps) => React.JSX.Element>;
 export type ModalTypeToComponentMap = {
     componentType: React.ComponentType<ConfigModalProps<InlineCardAdf | DatasourceAdf, DatasourceParameters>>;
     datasourceId: string;