@atlaskit/editor-plugin-card 0.5.11 → 0.7.0

package/dist/es2019/nodeviews/blockCard.js

@@ -115,6 +115,21 @@ export class BlockCard extends ReactNodeView {
     }
     return domRef;
   }
+
+  // Need this function to check if the datasource attribute was added or not to a blockCard.
+  // If so, we return false so we can get the node to re-render properly as a datasource node instead.
+  // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
+  validUpdate(currentNode, newNode) {
+    var _currentNode$attrs, _newNode$attrs;
+    const isCurrentNodeBlockCard = !((_currentNode$attrs = currentNode.attrs) !== null && _currentNode$attrs !== void 0 && _currentNode$attrs.datasource);
+    const isNewNodeDatasource = (_newNode$attrs = newNode.attrs) === null || _newNode$attrs === void 0 ? void 0 : _newNode$attrs.datasource;
+
+    // need to return falsy to update node
+    return !(isCurrentNodeBlockCard && isNewNodeDatasource);
+  }
+  update(node, decorations, _innerDecorations) {
+    return super.update(node, decorations, _innerDecorations, this.validUpdate);
+  }
   render() {
     const {
       platform,

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

@@ -393,8 +393,8 @@ export const getLinkNodeType = (appearance, linkNodes) => {
   }
 };
 
-// Apply an update to a datasource (aka blockCard) node
-export const updateExistingDatasource = (state, node, newAdf, view) => {
+// Apply an update made from the datasource edit modal to a card
+export const updateCardFromDatasourceModal = (state, node, newAdf, view, sourceEvent) => {
   const {
     tr,
     selection: {
@@ -404,33 +404,43 @@ export const updateExistingDatasource = (state, node, newAdf, view) => {
       nodes: schemaNodes
     }
   } = state;
-
-  // datasource to datasource
-  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
-    var _ref, _ref2, _newViews$properties, _oldViews$properties, _newAdf$attrs, _node$attrs;
-    const [newViews] = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
-    const [oldViews] = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
-    const newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(column => column.key);
-    const oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(column => column.key);
-    const isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
-    const isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
-    if (isColumnChange || isUrlChange) {
-      tr.setNodeMarkup(from, schemaNodes.blockCard, {
-        ...node.attrs,
-        ...newAdf.attrs
-      });
-      addLinkMetadata(state.selection, tr, {
-        action: ACTION.UPDATED
-      });
+  if (newAdf.type === 'blockCard') {
+    var _node$attrs, _newAdf$attrs;
+    if ((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource && (_newAdf$attrs = newAdf.attrs) !== null && _newAdf$attrs !== void 0 && _newAdf$attrs.datasource) {
+      var _ref, _ref2, _newViews$properties, _oldViews$properties, _newAdf$attrs2, _node$attrs2;
+      // datasource to datasource
+      const [newViews] = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
+      const [oldViews] = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
+      const newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(column => column.key);
+      const oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(column => column.key);
+      const isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
+      const isUrlChange = ((_newAdf$attrs2 = newAdf.attrs) === null || _newAdf$attrs2 === void 0 ? void 0 : _newAdf$attrs2.url) !== ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url);
+      if (isColumnChange || isUrlChange) {
+        tr.setNodeMarkup(from, schemaNodes.blockCard, {
+          ...node.attrs,
+          ...newAdf.attrs
+        });
+        addLinkMetadata(state.selection, tr, {
+          action: ACTION.UPDATED,
+          sourceEvent
+        });
+      }
+    } else {
+      // inline or blockCard to datasource
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
     }
   } else if (newAdf.type === 'inlineCard') {
-    // datasource to inline
+    // card type to inlineCard
     tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
+    addLinkMetadata(state.selection, tr, {
+      action: ACTION.UPDATED,
+      sourceEvent
+    });
   }
   hideDatasourceModal(tr);
   view.dispatch(tr.scrollIntoView());
 };
-export const insertDatasource = (state, adf, view) => {
+export const insertDatasource = (state, adf, view, sourceEvent) => {
   const {
     tr,
     selection: {
@@ -450,5 +460,9 @@ export const insertDatasource = (state, adf, view) => {
   // this will allow us to deal with insertions from multiple paths in a more consistent way
   newNode && tr.insert(from, newNode);
   hideDatasourceModal(tr);
+  addLinkMetadata(state.selection, tr, {
+    action: ACTION.INSERTED,
+    sourceEvent
+  });
   view.dispatch(tr.scrollIntoView());
 };

package/dist/es2019/toolbar.js

@@ -4,6 +4,7 @@ import { ACTION, ACTION_SUBJECT, buildOpenedSettingsPayload, buildVisitedLinkPay
 import { buildLayoutButtons, commandWithMetadata } from '@atlaskit/editor-common/card';
 import commonMessages, { linkMessages, linkToolbarMessages, cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FLOATING_TOOLBAR_LINKPICKER_CLASSNAME, richMediaClassName } from '@atlaskit/editor-common/styles';
+import { SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { findDomRefAtPos, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
@@ -14,9 +15,9 @@ import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { changeSelectedCardToText } from './pm-plugins/doc';
 import { pluginKey } from './pm-plugins/main';
-import { buildEditLinkToolbar, editDatasource, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
+import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton';
+import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
-import { SmallerEditIcon } from './ui/SmallerEditIcon';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
 import { appearanceForNodeType, displayInfoForCard, findCardInfo, titleUrlPairFromNode } from './utils';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
@@ -221,7 +222,7 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
       pluginInjectionApi
     })];
   } else if (shouldRenderDatasourceToolbar) {
-    return getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration);
+    return getDatasourceButtonGroup(metadata, intl, editorAnalyticsApi, node, hoverDecoration, node.attrs.datasource.id);
   } else {
     const {
       inlineCard
@@ -281,7 +282,8 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
     }
     const {
       allowBlockCards,
-      allowEmbeds
+      allowEmbeds,
+      allowDatasource
     } = cardOptions;
 
     // This code will be executed only for appearances such as "inline", "block" & "embed"
@@ -307,6 +309,20 @@ const generateToolbarItems = (state, featureFlags, intl, providerFactory, cardOp
         type: 'separator'
       });
     }
+    const shouldShowDatasourceEditButton = platform !== 'mobile' && allowDatasource;
+    if (shouldShowDatasourceEditButton) {
+      toolbarItems.unshift({
+        type: 'custom',
+        fallback: [],
+        render: editorView => /*#__PURE__*/React.createElement(EditDatasourceButton, {
+          intl: intl,
+          editorAnalyticsApi: editorAnalyticsApi,
+          url: url,
+          editorView: editorView,
+          editorState: state
+        })
+      });
+    }
     return toolbarItems;
   }
 };
@@ -336,7 +352,7 @@ const getSettingsButtonGroup = (state, featureFlags, intl, editorAnalyticsApi) =
     type: 'separator'
   }] : [];
 };
-const getDatasourceButtonGroup = (state, metadata, intl, editorAnalyticsApi, node, hoverDecoration) => {
+const getDatasourceButtonGroup = (metadata, intl, editorAnalyticsApi, node, hoverDecoration, datasourceId) => {
   var _node$attrs3;
   const toolbarItems = [{
     id: 'editor.edit.datasource',
@@ -345,7 +361,7 @@ const getDatasourceButtonGroup = (state, metadata, intl, editorAnalyticsApi, nod
     metadata: metadata,
     className: 'datasource-edit',
     title: intl.formatMessage(linkToolbarMessages.editDatasource),
-    onClick: editDatasource(node, editorAnalyticsApi),
+    onClick: editDatasource(datasourceId, editorAnalyticsApi),
     testId: 'datasource-edit-button'
   }];
   if (node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.url) {

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { ASSETS_LIST_OF_LINKS_DATASOURCE_ID, AssetsConfigModal, JIRA_LIST_OF_LINKS_DATASOURCE_ID, JiraIssuesConfigModal } from '@atlaskit/link-datasource';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
-import { insertDatasource, updateExistingDatasource } from '../../pm-plugins/doc';
+import { insertDatasource, updateCardFromDatasourceModal } from '../../pm-plugins/doc';
 export const DatasourceModal = ({
   view,
   modalType
@@ -20,7 +20,7 @@ export const DatasourceModal = ({
   }, [dispatch, state.tr]);
   const onInsert = useCallback(newAdf => {
     if (existingNode) {
-      updateExistingDatasource(state, existingNode, newAdf, view);
+      updateCardFromDatasourceModal(state, existingNode, newAdf, view);
     } else {
       insertDatasource(state, newAdf, view);
     }

package/dist/es2019/ui/EditDatasourceButton.js

@@ -0,0 +1,101 @@
+/** @jsx jsx */
+import { useEffect, useState } from 'react';
+import { css, jsx } from '@emotion/react';
+import { cardMessages as messages } from '@atlaskit/editor-common/messages';
+import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
+import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
+import { showDatasourceModal } from '../pm-plugins/actions';
+import { CardContextProvider } from './CardContextProvider';
+const buttonStyles = css({
+  pointerEvents: 'auto'
+});
+const buttonWrapperStyles = css({
+  display: 'flex'
+});
+const EditDatasourceButtonWithCardContext = ({
+  cardContext,
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  editorState
+}) => {
+  const [datasourceId, setDatasourceId] = useState(null);
+  useEffect(() => {
+    const fetchDatasource = async () => {
+      try {
+        var _cardContext$connecti, _cardContext$connecti2, _datasources$;
+        const response = url && cardContext && (await (cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$connecti = cardContext.connections) === null || _cardContext$connecti === void 0 ? void 0 : (_cardContext$connecti2 = _cardContext$connecti.client) === null || _cardContext$connecti2 === void 0 ? void 0 : _cardContext$connecti2.fetchData(url)));
+        const datasources = response && response.datasources || [];
+        setDatasourceId(((_datasources$ = datasources[0]) === null || _datasources$ === void 0 ? void 0 : _datasources$.id) || null);
+      } catch (e) {
+        setDatasourceId(null);
+      }
+    };
+    void fetchDatasource();
+  }, [cardContext, url]);
+  if (!datasourceId || !canRenderDatasource(datasourceId, false)) {
+    return null;
+  }
+  if (url) {
+    var _cardContext$store, _urlState$error;
+    const urlState = cardContext === null || cardContext === void 0 ? void 0 : (_cardContext$store = cardContext.store) === null || _cardContext$store === void 0 ? void 0 : _cardContext$store.getState()[url];
+    if ((urlState === null || urlState === void 0 ? void 0 : (_urlState$error = urlState.error) === null || _urlState$error === void 0 ? void 0 : _urlState$error.kind) === 'fatal') {
+      return null;
+    }
+  }
+  const dispatchCommand = fn => {
+    fn && fn(editorState, editorView && editorView.dispatch);
+    if (editorView && !editorView.hasFocus()) {
+      editorView.focus();
+    }
+  };
+  return jsx("div", {
+    css: buttonWrapperStyles
+  }, jsx(Button, {
+    css: buttonStyles,
+    title: intl.formatMessage(messages.datasourceTitle),
+    icon: jsx(SmallerEditIcon, null),
+    selected: false,
+    onClick: () => dispatchCommand(editDatasource(datasourceId, editorAnalyticsApi)),
+    testId: 'card-edit-datasource-button'
+  }), jsx(Separator, null));
+};
+export const EditDatasourceButton = ({
+  intl,
+  editorAnalyticsApi,
+  url,
+  editorView,
+  editorState
+}) => {
+  return jsx(CardContextProvider, null, ({
+    cardContext
+  }) => jsx(EditDatasourceButtonWithCardContext, {
+    url: url,
+    intl: intl,
+    editorAnalyticsApi: editorAnalyticsApi,
+    editorView: editorView,
+    editorState: editorState,
+    cardContext: cardContext
+  }));
+};
+export const editDatasource = (datasourceId, editorAnalyticsApi) => (state, dispatch) => {
+  const datasourceType = getDatasourceType(datasourceId);
+  if (dispatch && datasourceType) {
+    const {
+      tr
+    } = state;
+    showDatasourceModal(datasourceType)(tr);
+    // editorAnalyticsApi?.attachAnalyticsEvent(
+    //   buildEditLinkPayload(
+    //     type as
+    //       | ACTION_SUBJECT_ID.CARD_INLINE
+    //       | ACTION_SUBJECT_ID.CARD_BLOCK
+    //       | ACTION_SUBJECT_ID.EMBEDS,
+    //   ),
+    // )(tr);
+    dispatch(tr);
+    return true;
+  }
+  return false;
+};

package/dist/es2019/ui/EditLinkToolbar.js

@@ -5,9 +5,8 @@ import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
 import { HyperlinkAddToolbar as HyperlinkToolbar } from '@atlaskit/editor-common/link';
 import { linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { LINKPICKER_HEIGHT_IN_PX, RECENT_SEARCH_HEIGHT_IN_PX, RECENT_SEARCH_WIDTH_IN_PX } from '@atlaskit/editor-common/ui';
-import { getDatasourceType } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
-import { hideLinkToolbar, showDatasourceModal, showLinkToolbar } from '../pm-plugins/actions';
+import { hideLinkToolbar, showLinkToolbar } from '../pm-plugins/actions';
 import { changeSelectedCardToLink, updateCard } from '../pm-plugins/doc';
 import { displayInfoForCard, findCardInfo } from '../utils';
 export function HyperlinkAddToolbarWithState({
@@ -191,25 +190,4 @@ export const editLinkToolbarConfig = (showLinkingToolbar, lpLinkPicker) => {
     width: RECENT_SEARCH_WIDTH_IN_PX,
     forcePlacement: true
   } : {};
-};
-export const editDatasource = (node, editorAnalyticsApi) => (state, dispatch) => {
-  var _node$attrs;
-  const modalType = getDatasourceType((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource.id);
-  if (dispatch && modalType) {
-    const {
-      tr
-    } = state;
-    showDatasourceModal(modalType)(tr);
-    // editorAnalyticsApi?.attachAnalyticsEvent(
-    //   buildEditLinkPayload(
-    //     type as
-    //       | ACTION_SUBJECT_ID.CARD_INLINE
-    //       | ACTION_SUBJECT_ID.CARD_BLOCK
-    //       | ACTION_SUBJECT_ID.EMBEDS,
-    //   ),
-    // )(tr);
-    dispatch(tr);
-    return true;
-  }
-  return false;
 };

package/dist/es2019/ui/EditorLinkingPlatformAnalytics/DatasourceEvents.js

@@ -1,5 +1,63 @@
 import { useEffect, useMemo } from 'react';
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+import { useDatasourceLifecycleAnalytics } from '@atlaskit/link-analytics';
 import { EVENT, EVENT_SUBJECT } from '../../analytics/types';
+import { getMethod } from './common';
+function getDatasourceDisplay(datasourceAttrs) {
+  var _datasourceAttrs$data;
+  return (_datasourceAttrs$data = datasourceAttrs.datasource.views[0]) === null || _datasourceAttrs$data === void 0 ? void 0 : _datasourceAttrs$data.type;
+}
+function getDisplayedColumnCount(datasourceAttrs) {
+  var _datasourceAttrs$data2, _datasourceAttrs$data3, _datasourceAttrs$data4, _datasourceAttrs$data5;
+  return (_datasourceAttrs$data2 = (_datasourceAttrs$data3 = datasourceAttrs.datasource.views[0]) === null || _datasourceAttrs$data3 === void 0 ? void 0 : (_datasourceAttrs$data4 = _datasourceAttrs$data3.properties) === null || _datasourceAttrs$data4 === void 0 ? void 0 : (_datasourceAttrs$data5 = _datasourceAttrs$data4.columns) === null || _datasourceAttrs$data5 === void 0 ? void 0 : _datasourceAttrs$data5.length) !== null && _datasourceAttrs$data2 !== void 0 ? _datasourceAttrs$data2 : 0;
+}
+function getSearchMethod(creationMethod, metadata) {
+  if (creationMethod === 'editor_paste' || creationMethod === 'editor_type') {
+    return '';
+  }
+  const {
+    sourceEvent
+  } = metadata;
+  if (sourceEvent instanceof UIAnalyticsEvent) {
+    const event = sourceEvent;
+    return event.payload.searchMethod;
+  }
+  return 'unknown';
+}
+function getAnalyticAttributesFromNode(datasourceAttrs, metadata) {
+  const {
+    url,
+    datasource: {
+      id: datasourceId,
+      parameters
+    }
+  } = datasourceAttrs;
+  const display = getDatasourceDisplay(datasourceAttrs);
+  let inputMethod = '';
+  let actions = [];
+  if (metadata.inputMethod) {
+    var _getMethod;
+    inputMethod = (_getMethod = getMethod({
+      inputMethod: metadata.inputMethod
+    })) !== null && _getMethod !== void 0 ? _getMethod : '';
+  } else if (metadata.sourceEvent instanceof UIAnalyticsEvent) {
+    inputMethod = metadata.sourceEvent.payload.inputMethod;
+    actions = metadata.sourceEvent.payload.actions;
+  }
+  const displayedColumnCount = getDisplayedColumnCount(datasourceAttrs);
+  const searchMethod = getSearchMethod(inputMethod, metadata);
+  return {
+    actions,
+    inputMethod,
+    datasourceId,
+    display,
+    displayedColumnCount,
+    parameters,
+    searchMethod,
+    url
+  };
+}
+
 /**
  * Subscribes to the events occuring in the card
  * plugin and fires analytics events accordingly
@@ -7,25 +65,100 @@ import { EVENT, EVENT_SUBJECT } from '../../analytics/types';
 export const DatasourceEventsBinding = ({
   cardPluginEvents
 }) => {
+  const {
+    datasourceCreated,
+    datasourceUpdated,
+    datasourceDeleted
+  } = useDatasourceLifecycleAnalytics();
   const eventHandlers = useMemo(() => {
     return {
-      [EVENT.CREATED]: metadata => {
-        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
-        // eslint-disable-next-line no-console
-        console.log('CREATED', metadata.node, metadata.nodeContext);
+      [EVENT.CREATED]: ({
+        node,
+        nodeContext,
+        ...metadata
+      }) => {
+        const attributes = getAnalyticAttributesFromNode(node.attrs, metadata);
+        const {
+          actions,
+          inputMethod,
+          datasourceId,
+          display,
+          displayedColumnCount,
+          parameters,
+          searchMethod,
+          url
+        } = attributes;
+        datasourceCreated({
+          datasourceId,
+          parameters,
+          url
+        }, null, {
+          actions,
+          creationMethod: inputMethod,
+          display,
+          displayedColumnCount,
+          nodeContext: nodeContext,
+          searchMethod
+        });
       },
-      [EVENT.UPDATED]: metadata => {
-        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
-        // eslint-disable-next-line no-console
-        console.log('UPDATED', metadata.node, metadata.nodeContext);
+      [EVENT.UPDATED]: ({
+        node,
+        nodeContext,
+        ...metadata
+      }) => {
+        const attributes = getAnalyticAttributesFromNode(node.attrs, metadata);
+        const {
+          actions,
+          datasourceId,
+          display,
+          displayedColumnCount,
+          inputMethod,
+          parameters,
+          searchMethod,
+          url
+        } = attributes;
+        datasourceUpdated({
+          datasourceId,
+          parameters,
+          url
+        }, null, {
+          actions,
+          display,
+          displayedColumnCount,
+          nodeContext: nodeContext,
+          searchMethod,
+          updateMethod: inputMethod
+        });
       },
-      [EVENT.DELETED]: metadata => {
-        // TODO Impl as part of https://product-fabric.atlassian.net/browse/EDM-7072
-        // eslint-disable-next-line no-console
-        console.log('DELETED', metadata.node, metadata.nodeContext);
+      [EVENT.DELETED]: ({
+        node,
+        nodeContext,
+        ...metadata
+      }) => {
+        const attributes = getAnalyticAttributesFromNode(node.attrs, metadata);
+        const {
+          datasourceId,
+          display,
+          displayedColumnCount,
+          inputMethod,
+          parameters,
+          searchMethod,
+          url
+        } = attributes;
+        datasourceDeleted({
+          datasourceId,
+          parameters,
+          url
+        }, null, {
+          deleteMethod: inputMethod,
+          display,
+          displayedColumnCount,
+          nodeContext: nodeContext,
+          searchMethod
+        });
       }
     };
-  }, []);
+  }, [datasourceCreated, datasourceUpdated, datasourceDeleted]);
 
   /**
    * Subscribe to datasource events

package/dist/esm/analytics/events-from-tr.js

@@ -133,6 +133,7 @@ export var findChanged = function findChanged(tr, state) {
   if (!isUpdate) {
     var _getLinkMetadataFromT = getLinkMetadataFromTransaction(tr),
       inputMethod = _getLinkMetadataFromT.inputMethod;
+
     /**
      * If there is no identifiable input method, and the links inserted and removed appear to be the same,
      * then this transaction likely is not intended to be consided to be the insertion and removal of links

package/dist/esm/nodeviews/blockCard.js

@@ -1,3 +1,4 @@
+import _get from "@babel/runtime/helpers/get";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -137,6 +138,25 @@ export var BlockCard = /*#__PURE__*/function (_ReactNodeView) {
       }
       return domRef;
     }
+
+    // Need this function to check if the datasource attribute was added or not to a blockCard.
+    // If so, we return false so we can get the node to re-render properly as a datasource node instead.
+    // Otherwise, the node view will still consider the node as a blockCard and render a regular blockCard.
+  }, {
+    key: "validUpdate",
+    value: function validUpdate(currentNode, newNode) {
+      var _currentNode$attrs, _newNode$attrs;
+      var isCurrentNodeBlockCard = !((_currentNode$attrs = currentNode.attrs) !== null && _currentNode$attrs !== void 0 && _currentNode$attrs.datasource);
+      var isNewNodeDatasource = (_newNode$attrs = newNode.attrs) === null || _newNode$attrs === void 0 ? void 0 : _newNode$attrs.datasource;
+
+      // need to return falsy to update node
+      return !(isCurrentNodeBlockCard && isNewNodeDatasource);
+    }
+  }, {
+    key: "update",
+    value: function update(node, decorations, _innerDecorations) {
+      return _get(_getPrototypeOf(BlockCard.prototype), "update", this).call(this, node, decorations, _innerDecorations, this.validUpdate);
+    }
   }, {
     key: "render",
     value: function render() {

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

@@ -411,43 +411,53 @@ export var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
   }
 };
 
-// Apply an update to a datasource (aka blockCard) node
-export var updateExistingDatasource = function updateExistingDatasource(state, node, newAdf, view) {
+// Apply an update made from the datasource edit modal to a card
+export var updateCardFromDatasourceModal = function updateCardFromDatasourceModal(state, node, newAdf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,
     schemaNodes = state.schema.nodes;
-
-  // datasource to datasource
-  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
-    var _ref3, _ref6, _newViews$properties, _oldViews$properties, _newAdf$attrs, _node$attrs;
-    var _ref = (_ref3 = newAdf.attrs.datasource.views) !== null && _ref3 !== void 0 ? _ref3 : [],
-      _ref2 = _slicedToArray(_ref, 1),
-      newViews = _ref2[0];
-    var _ref4 = (_ref6 = node.attrs.datasource.views) !== null && _ref6 !== void 0 ? _ref6 : [],
-      _ref5 = _slicedToArray(_ref4, 1),
-      oldViews = _ref5[0];
-    var newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(function (column) {
-      return column.key;
-    });
-    var oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(function (column) {
-      return column.key;
-    });
-    var isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
-    var isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
-    if (isColumnChange || isUrlChange) {
-      tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
-      addLinkMetadata(state.selection, tr, {
-        action: ACTION.UPDATED
+  if (newAdf.type === 'blockCard') {
+    var _node$attrs, _newAdf$attrs;
+    if ((_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource && (_newAdf$attrs = newAdf.attrs) !== null && _newAdf$attrs !== void 0 && _newAdf$attrs.datasource) {
+      var _ref3, _ref6, _newViews$properties, _oldViews$properties, _newAdf$attrs2, _node$attrs2;
+      // datasource to datasource
+      var _ref = (_ref3 = newAdf.attrs.datasource.views) !== null && _ref3 !== void 0 ? _ref3 : [],
+        _ref2 = _slicedToArray(_ref, 1),
+        newViews = _ref2[0];
+      var _ref4 = (_ref6 = node.attrs.datasource.views) !== null && _ref6 !== void 0 ? _ref6 : [],
+        _ref5 = _slicedToArray(_ref4, 1),
+        oldViews = _ref5[0];
+      var newColumnKeys = newViews === null || newViews === void 0 ? void 0 : (_newViews$properties = newViews.properties) === null || _newViews$properties === void 0 ? void 0 : _newViews$properties.columns.map(function (column) {
+        return column.key;
       });
+      var oldColumnKeys = oldViews === null || oldViews === void 0 ? void 0 : (_oldViews$properties = oldViews.properties) === null || _oldViews$properties === void 0 ? void 0 : _oldViews$properties.columns.map(function (column) {
+        return column.key;
+      });
+      var isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
+      var isUrlChange = ((_newAdf$attrs2 = newAdf.attrs) === null || _newAdf$attrs2 === void 0 ? void 0 : _newAdf$attrs2.url) !== ((_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.url);
+      if (isColumnChange || isUrlChange) {
+        tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
+        addLinkMetadata(state.selection, tr, {
+          action: ACTION.UPDATED,
+          sourceEvent: sourceEvent
+        });
+      }
+    } else {
+      // inline or blockCard to datasource
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
     }
   } else if (newAdf.type === 'inlineCard') {
-    // datasource to inline
+    // card type to inlineCard
     tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
+    addLinkMetadata(state.selection, tr, {
+      action: ACTION.UPDATED,
+      sourceEvent: sourceEvent
+    });
   }
   hideDatasourceModal(tr);
   view.dispatch(tr.scrollIntoView());
 };
-export var insertDatasource = function insertDatasource(state, adf, view) {
+export var insertDatasource = function insertDatasource(state, adf, view, sourceEvent) {
   var tr = state.tr,
     from = state.selection.from,
     schemaNodes = state.schema.nodes;
@@ -459,5 +469,9 @@ export var insertDatasource = function insertDatasource(state, adf, view) {
   // this will allow us to deal with insertions from multiple paths in a more consistent way
   newNode && tr.insert(from, newNode);
   hideDatasourceModal(tr);
+  addLinkMetadata(state.selection, tr, {
+    action: ACTION.INSERTED,
+    sourceEvent: sourceEvent
+  });
   view.dispatch(tr.scrollIntoView());
 };