@atlaskit/editor-plugin-card 4.5.17 → 4.5.19

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-card
 
+## 4.5.19
+
+### Patch Changes
+
+- Updated dependencies
+
+## 4.5.18
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 4.5.17
 
 ### Patch Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -14,6 +14,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -54,7 +55,8 @@ var BlockCardComponent = exports.BlockCardComponent = /*#__PURE__*/function (_Re
         view.dispatch((0, _actions.registerCard)({
           title: title,
           url: url,
-          pos: pos
+          pos: pos,
+          id: _this.props.id
         })(view.state.tr));
       })();
     });
@@ -120,6 +122,7 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
       args[_key] = arguments[_key];
     }
     _this2 = _callSuper(this, BlockCard, [].concat(args));
+    (0, _defineProperty2.default)(_this2, "id", (0, _v.default)());
     (0, _defineProperty2.default)(_this2, "updateContentEditable", function (editorViewModeState, divElement) {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -177,7 +180,8 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         getPos: this.getPos,
         actionOptions: actionOptions,
         pluginInjectionApi: pluginInjectionApi,
-        onClickCallback: onClickCallback
+        onClickCallback: onClickCallback,
+        id: this.id
       });
     }
   }, {
@@ -185,6 +189,18 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_card_plugin_state')) {
+        this.removeCard();
+      }
+    }
+  }, {
+    key: "removeCard",
+    value: function removeCard() {
+      var tr = this.view.state.tr;
+      (0, _actions.removeCard)({
+        id: this.id
+      })(tr);
+      this.view.dispatch(tr);
     }
   }]);
 }(_reactNodeView.default);

package/dist/cjs/nodeviews/embedCard.js

@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _steps = require("@atlaskit/adf-schema/steps");
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
@@ -162,7 +163,8 @@ var EmbedCardComponent = exports.EmbedCardComponent = /*#__PURE__*/function (_Re
         return view.dispatch((0, _actions.registerCard)({
           title: title,
           url: url,
-          pos: pos
+          pos: pos,
+          id: _this.props.id
         })(view.state.tr));
       })();
       try {
@@ -345,6 +347,7 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
       args[_key] = arguments[_key];
     }
     _this2 = _callSuper(this, EmbedCard, [].concat(args));
+    (0, _defineProperty2.default)(_this2, "id", (0, _v.default)());
     (0, _defineProperty2.default)(_this2, "updateContentEditable", function (editorViewModeState, divElement) {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -405,6 +408,18 @@ var EmbedCard = exports.EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_card_plugin_state')) {
+        this.removeCard();
+      }
+    }
+  }, {
+    key: "removeCard",
+    value: function removeCard() {
+      var tr = this.view.state.tr;
+      (0, _actions.removeCard)({
+        id: this.id
+      })(tr);
+      this.view.dispatch(tr);
     }
   }]);
 }(_reactNodeView.default);

package/dist/cjs/nodeviews/inlineCard.js

@@ -12,12 +12,14 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _v = _interopRequireDefault(require("uuid/v4"));
 var _hooks = require("@atlaskit/editor-common/hooks");
 var _link = require("@atlaskit/editor-common/link");
 var _ui = require("@atlaskit/editor-common/ui");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../pm-plugins/actions");
 var _utils = require("../pm-plugins/utils");
 var _ConfigureOverlay = _interopRequireDefault(require("../ui/ConfigureOverlay"));
@@ -40,6 +42,19 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
   var _node$attrs = node.attrs,
     url = _node$attrs.url,
     data = _node$attrs.data;
+  var refId = (0, _react.useRef)((0, _v.default)());
+  (0, _react.useEffect)(function () {
+    var id = refId.current;
+    return function () {
+      if ((0, _platformFeatureFlags.fg)('platform_editor_fix_card_plugin_state')) {
+        var tr = view.state.tr;
+        (0, _actions.removeCard)({
+          id: id
+        })(tr);
+        view.dispatch(tr);
+      }
+    };
+  }, [getPos, view]);
   var scrollContainer = (0, _react.useMemo)(
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -64,7 +79,8 @@ var InlineCard = exports.InlineCard = /*#__PURE__*/(0, _react.memo)(function (_r
       (0, _actions.registerCard)({
         title: title,
         url: url,
-        pos: pos
+        pos: pos,
+        id: refId.current
       })(tr);
       onRes === null || onRes === void 0 || onRes(tr, title);
       view.dispatch(tr);
@@ -166,7 +182,7 @@ function InlineCardNodeView(props) {
     onClickCallback: onClickCallback
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
+  }, enableInlineUpgradeFeatures && (0, _utils.getAwarenessProps)(view.state, getPos, allowEmbeds, allowBlockCards, !(0, _experiments.editorExperiment)('live_pages_graceful_edit', 'control') ? true : (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view')));
 }
 var inlineCardNodeView = exports.inlineCardNodeView = function inlineCardNodeView(_ref2) {
   var inlineCardViewProducer = _ref2.inlineCardViewProducer;

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -8,7 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.InlineCardWithAwareness = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../pm-plugins/actions");
+var _pluginKey = require("../pm-plugins/plugin-key");
 var _AwarenessWrapper = require("../ui/AwarenessWrapper");
 var _inlineCard = require("./inlineCard");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
@@ -38,9 +40,22 @@ var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0,
     isResolvedViewRendered = _useState6[0],
     setIsResolvedViewRendered = _useState6[1];
   var onResolve = (0, _react.useCallback)(function (tr, title) {
-    (0, _actions.registerRemoveOverlay)(function () {
-      return setIsInserted(false);
-    })(tr);
+    if ((0, _platformFeatureFlags.fg)('platform_editor_fix_card_plugin_state')) {
+      var metadata = tr.getMeta(_pluginKey.pluginKey);
+      if (metadata && metadata.type === 'REGISTER') {
+        (0, _actions.registerRemoveOverlay)(function () {
+          return setIsInserted(false);
+        }, metadata.info)(tr);
+      } else {
+        (0, _actions.registerRemoveOverlay)(function () {
+          return setIsInserted(false);
+        })(tr);
+      }
+    } else {
+      (0, _actions.registerRemoveOverlay)(function () {
+        return setIsInserted(false);
+      })(tr);
+    }
     if (title) {
       setIsResolvedViewRendered(true);
     }

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showLinkToolbar = exports.showDatasourceModal = exports.setProvider = exports.setDatasourceTableRef = exports.setDatasourceStash = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.removeDatasourceStash = exports.registerSmartCardEvents = exports.registerRemoveOverlay = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.hideDatasourceModal = exports.clearOverlayCandidate = exports.cardAction = void 0;
+exports.showLinkToolbar = exports.showDatasourceModal = exports.setProvider = exports.setDatasourceTableRef = exports.setDatasourceStash = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.removeDatasourceStash = exports.removeCard = exports.registerSmartCardEvents = exports.registerRemoveOverlay = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.hideDatasourceModal = exports.clearOverlayCandidate = exports.cardAction = void 0;
 var _pluginKey = require("./plugin-key");
 var cardAction = exports.cardAction = function cardAction(tr, action) {
   return tr.setMeta(_pluginKey.pluginKey, action);
@@ -32,11 +32,20 @@ var registerCard = exports.registerCard = function registerCard(info) {
     });
   };
 };
-var registerRemoveOverlay = exports.registerRemoveOverlay = function registerRemoveOverlay(callback) {
+var removeCard = exports.removeCard = function removeCard(info) {
+  return function (tr) {
+    return cardAction(tr, {
+      type: 'REMOVE_CARD',
+      info: info
+    });
+  };
+};
+var registerRemoveOverlay = exports.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/cjs/pm-plugins/reducers.js

@@ -35,6 +35,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
@@ -85,6 +92,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
   });
 };
@@ -114,6 +125,8 @@ var _default = exports.default = function _default(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/es2019/nodeviews/blockCard.js

@@ -1,13 +1,14 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React from 'react';
 import rafSchedule from 'raf-schd';
+import uuid from 'uuid/v4';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { Datasource } from '../nodeviews/datasource';
-import { registerCard } from '../pm-plugins/actions';
+import { registerCard, removeCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../pm-plugins/utils';
 import { Card } from './genericCard';
 
@@ -40,7 +41,8 @@ export class BlockCardComponent extends React.PureComponent {
         view.dispatch(registerCard({
           title,
           url,
-          pos
+          pos,
+          id: this.props.id
         })(view.state.tr));
       })();
     });
@@ -99,6 +101,7 @@ const WrappedBlockCard = Card(BlockCardComponent, UnsupportedBlock);
 export class BlockCard extends ReactNodeView {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "id", uuid());
     _defineProperty(this, "updateContentEditable", (editorViewModeState, divElement) => {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -144,12 +147,25 @@ export class BlockCard extends ReactNodeView {
       getPos: this.getPos,
       actionOptions: actionOptions,
       pluginInjectionApi: pluginInjectionApi,
-      onClickCallback: onClickCallback
+      onClickCallback: onClickCallback,
+      id: this.id
     });
   }
   destroy() {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+    if (fg('platform_editor_fix_card_plugin_state')) {
+      this.removeCard();
+    }
+  }
+  removeCard() {
+    const {
+      tr
+    } = this.view.state;
+    removeCard({
+      id: this.id
+    })(tr);
+    this.view.dispatch(tr);
   }
 }
 export const blockCardNodeView = ({

package/dist/es2019/nodeviews/embedCard.js

@@ -2,6 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import rafSchedule from 'raf-schd';
+import uuid from 'uuid/v4';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -10,7 +11,7 @@ import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard } from '../pm-plugins/actions';
+import { registerCard, removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { Card } from './genericCard';
 const CardInner = ({
@@ -151,7 +152,8 @@ export class EmbedCardComponent extends React.PureComponent {
         return view.dispatch(registerCard({
           title,
           url,
-          pos
+          pos,
+          id: this.props.id
         })(view.state.tr));
       })();
       try {
@@ -332,6 +334,7 @@ const WrappedBlockCard = Card(EmbedCardComponent, UnsupportedBlock);
 export class EmbedCard extends ReactNodeView {
   constructor(...args) {
     super(...args);
+    _defineProperty(this, "id", uuid());
     _defineProperty(this, "updateContentEditable", (editorViewModeState, divElement) => {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -381,6 +384,18 @@ export class EmbedCard extends ReactNodeView {
   destroy() {
     var _this$unsubscribe;
     (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 ? void 0 : _this$unsubscribe.call(this);
+    if (fg('platform_editor_fix_card_plugin_state')) {
+      this.removeCard();
+    }
+  }
+  removeCard() {
+    const {
+      tr
+    } = this.view.state;
+    removeCard({
+      id: this.id
+    })(tr);
+    this.view.dispatch(tr);
   }
 }
 export const embedCardNodeView = ({

package/dist/es2019/nodeviews/inlineCard.js

@@ -1,13 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
-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';
@@ -29,6 +31,21 @@ export const InlineCard = /*#__PURE__*/memo(({
     url,
     data
   } = node.attrs;
+  const refId = useRef(uuid());
+  useEffect(() => {
+    const id = refId.current;
+    return () => {
+      if (fg('platform_editor_fix_card_plugin_state')) {
+        const {
+          tr
+        } = view.state;
+        removeCard({
+          id
+        })(tr);
+        view.dispatch(tr);
+      }
+    };
+  }, [getPos, view]);
   const scrollContainer = useMemo(
   // Ignored via go/ees005
   // eslint-disable-next-line @atlaskit/editor/no-as-casting
@@ -53,7 +70,8 @@ export const InlineCard = /*#__PURE__*/memo(({
       registerCard({
         title,
         url,
-        pos
+        pos,
+        id: refId.current
       })(tr);
       onRes === null || onRes === void 0 ? void 0 : onRes(tr, title);
       view.dispatch(tr);
@@ -155,7 +173,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 const inlineCardNodeView = ({
   inlineCardViewProducer

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -1,5 +1,7 @@
 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 const InlineCardWithAwareness = /*#__PURE__*/memo(({
@@ -19,7 +21,16 @@ export const InlineCardWithAwareness = /*#__PURE__*/memo(({
   const [isInserted, setIsInserted] = useState(false);
   const [isResolvedViewRendered, setIsResolvedViewRendered] = useState(false);
   const onResolve = useCallback((tr, title) => {
-    registerRemoveOverlay(() => setIsInserted(false))(tr);
+    if (fg('platform_editor_fix_card_plugin_state')) {
+      const metadata = tr.getMeta(pluginKey);
+      if (metadata && metadata.type === 'REGISTER') {
+        registerRemoveOverlay(() => setIsInserted(false), metadata.info)(tr);
+      } else {
+        registerRemoveOverlay(() => setIsInserted(false))(tr);
+      }
+    } else {
+      registerRemoveOverlay(() => setIsInserted(false))(tr);
+    }
     if (title) {
       setIsResolvedViewRendered(true);
     }

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

@@ -14,9 +14,14 @@ export const registerCard = info => tr => cardAction(tr, {
   type: 'REGISTER',
   info
 });
-export const registerRemoveOverlay = callback => tr => cardAction(tr, {
+export const removeCard = info => tr => cardAction(tr, {
+  type: 'REMOVE_CARD',
+  info
+});
+export const registerRemoveOverlay = (callback, info) => tr => cardAction(tr, {
   type: 'REGISTER_REMOVE_OVERLAY_ON_INSERTED_LINK',
-  callback
+  callback,
+  info
 });
 export const registerSmartCardEvents = smartLinkEvents => tr => cardAction(tr, {
   type: 'REGISTER_EVENTS',

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

@@ -22,6 +22,12 @@ const register = (state, action) => {
     cards: state.cards.filter(card => card.pos !== action.info.pos).concat(action.info)
   };
 };
+const removeCard = (state, action) => {
+  return {
+    ...state,
+    cards: state.cards.filter(card => card.id !== action.info.id)
+  };
+};
 const setProvider = (state, action) => {
   return {
     ...state,
@@ -82,6 +88,10 @@ const clearOverlayCandidate = state => {
 const registerRemoveOverlayOnInsertedLink = (state, action) => {
   return {
     ...state,
+    cards: action.info ? state.cards.filter(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
   };
 };
@@ -116,6 +126,8 @@ export default ((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/esm/nodeviews/blockCard.js

@@ -10,13 +10,14 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import rafSchedule from 'raf-schd';
+import uuid from 'uuid/v4';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser, canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { Datasource } from '../nodeviews/datasource';
-import { registerCard } from '../pm-plugins/actions';
+import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
 import { isDatasourceNode } from '../pm-plugins/utils';
 import { Card } from './genericCard';
 
@@ -48,7 +49,8 @@ export var BlockCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         view.dispatch(registerCard({
           title: title,
           url: url,
-          pos: pos
+          pos: pos,
+          id: _this.props.id
         })(view.state.tr));
       })();
     });
@@ -114,6 +116,7 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
       args[_key] = arguments[_key];
     }
     _this2 = _callSuper(this, BlockCard, [].concat(args));
+    _defineProperty(_this2, "id", uuid());
     _defineProperty(_this2, "updateContentEditable", function (editorViewModeState, divElement) {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -171,7 +174,8 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
         getPos: this.getPos,
         actionOptions: actionOptions,
         pluginInjectionApi: pluginInjectionApi,
-        onClickCallback: onClickCallback
+        onClickCallback: onClickCallback,
+        id: this.id
       });
     }
   }, {
@@ -179,6 +183,18 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if (fg('platform_editor_fix_card_plugin_state')) {
+        this.removeCard();
+      }
+    }
+  }, {
+    key: "removeCard",
+    value: function removeCard() {
+      var tr = this.view.state.tr;
+      _removeCard({
+        id: this.id
+      })(tr);
+      this.view.dispatch(tr);
     }
   }]);
 }(ReactNodeView);

package/dist/esm/nodeviews/embedCard.js

@@ -13,6 +13,7 @@ function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstruct
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 import React from 'react';
 import rafSchedule from 'raf-schd';
+import uuid from 'uuid/v4';
 import { SetAttrsStep } from '@atlaskit/adf-schema/steps';
 import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
@@ -21,7 +22,7 @@ import { floatingLayouts, isRichMediaInsideOfBlockNode } from '@atlaskit/editor-
 import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { EmbedResizeMessageListener, Card as SmartCard } from '@atlaskit/smart-card';
-import { registerCard } from '../pm-plugins/actions';
+import { registerCard, removeCard as _removeCard } from '../pm-plugins/actions';
 import ResizableEmbedCard from '../ui/ResizableEmbedCard';
 import { Card } from './genericCard';
 var CardInner = function CardInner(_ref) {
@@ -155,7 +156,8 @@ export var EmbedCardComponent = /*#__PURE__*/function (_React$PureComponent) {
         return view.dispatch(registerCard({
           title: title,
           url: url,
-          pos: pos
+          pos: pos,
+          id: _this.props.id
         })(view.state.tr));
       })();
       try {
@@ -338,6 +340,7 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
       args[_key] = arguments[_key];
     }
     _this2 = _callSuper(this, EmbedCard, [].concat(args));
+    _defineProperty(_this2, "id", uuid());
     _defineProperty(_this2, "updateContentEditable", function (editorViewModeState, divElement) {
       divElement.contentEditable = (editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'view' ? 'false' : 'true';
     });
@@ -398,6 +401,18 @@ export var EmbedCard = /*#__PURE__*/function (_ReactNodeView) {
     value: function destroy() {
       var _this$unsubscribe;
       (_this$unsubscribe = this.unsubscribe) === null || _this$unsubscribe === void 0 || _this$unsubscribe.call(this);
+      if (fg('platform_editor_fix_card_plugin_state')) {
+        this.removeCard();
+      }
+    }
+  }, {
+    key: "removeCard",
+    value: function removeCard() {
+      var tr = this.view.state.tr;
+      _removeCard({
+        id: this.id
+      })(tr);
+      this.view.dispatch(tr);
     }
   }]);
 }(ReactNodeView);