@atlaskit/editor-plugin-card 0.3.8 → 0.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-card
 
+## 0.4.0
+
+### Minor Changes
+
+- [`b9a083dc04d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b9a083dc04d) - [ux] Adds error boundaries specific to datasource in editor and renderer. Fallback to unsupported block if no url or inline if url
+
+## 0.3.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.3.8
 
 ### Patch Changes

package/dist/cjs/datasourceErrorBoundary.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceErrorBoundary = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _adfSchema = require("@atlaskit/adf-schema");
+var _doc = require("./pm-plugins/doc");
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /* eslint-disable @repo/internal/react/no-class-components */
+var DatasourceErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2.default)(DatasourceErrorBoundary, _React$Component);
+  var _super = _createSuper(DatasourceErrorBoundary);
+  function DatasourceErrorBoundary() {
+    var _this;
+    (0, _classCallCheck2.default)(this, DatasourceErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      isError: false
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(DatasourceErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.props.handleError();
+      // prevent re-render children with error
+      if (this.state.isError) {
+        this.setState({
+          isError: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        UnsupportedComponent = _this$props.unsupportedComponent,
+        view = _this$props.view;
+      if (this.state.isError) {
+        if (url && (0, _adfSchema.isSafeUrl)(url)) {
+          return (0, _doc.setSelectedCardAppearance)('inline', undefined)(view.state, view.dispatch);
+        }
+        return /*#__PURE__*/_react.default.createElement(UnsupportedComponent, null);
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        isError: true
+      };
+    }
+  }]);
+  return DatasourceErrorBoundary;
+}(_react.default.Component);
+exports.DatasourceErrorBoundary = DatasourceErrorBoundary;

package/dist/cjs/nodeviews/datasource.js

@@ -17,12 +17,25 @@ var _react2 = require("@emotion/react");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _styles = require("@atlaskit/editor-common/styles");
+var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _datasourceErrorBoundary = require("../datasourceErrorBoundary");
+var _doc = require("../pm-plugins/doc");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
+var getPosSafely = function getPosSafely(pos) {
+  if (!pos || typeof pos === 'boolean') {
+    return;
+  }
+  try {
+    return pos();
+  } catch (e) {
+    // Can blow up in rare cases, when node has been removed.
+  }
+};
 // eslint-disable-next-line @repo/internal/react/no-class-components
 var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
   (0, _inherits2.default)(DatasourceComponent, _React$PureComponent);
@@ -31,17 +44,6 @@ var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
     var _this;
     (0, _classCallCheck2.default)(this, DatasourceComponent);
     _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPosSafely", function () {
-      var getPos = _this.props.getPos;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      try {
-        return getPos();
-      } catch (e) {
-        // Can blow up in rare cases, when node has been removed.
-      }
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getDatasource", function () {
       return _this.props.node.attrs.datasource;
     });
@@ -55,7 +57,7 @@ var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props$view = _this.props.view,
         state = _this$props$view.state,
         dispatch = _this$props$view.dispatch;
-      var pos = _this.getPosSafely();
+      var pos = getPosSafely(_this.props.getPos);
       if (pos === undefined) {
         return;
       }
@@ -78,6 +80,12 @@ var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       tr.setMeta('scrollIntoView', false);
       dispatch(tr);
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onError", function (_ref) {
+      var err = _ref.err;
+      if (err) {
+        throw err;
+      }
+    });
     return _this;
   }
   (0, _createClass2.default)(DatasourceComponent, [{
@@ -88,8 +96,8 @@ var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       var tableView = this.getTableView();
       if (tableView) {
         var _tableView$properties;
-        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref) {
-          var key = _ref.key;
+        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref2) {
+          var key = _ref2.key;
           return key;
         });
 
@@ -122,10 +130,27 @@ var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     var _this2;
     (0, _classCallCheck2.default)(this, Datasource);
     _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    // this is necessary so that the datasource toolbar won't be rendered on error
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this2), "updateNodeRemoveAttrs", function () {
+      var url = _this2.node.attrs.url;
+      var _this2$view = _this2.view,
+        state = _this2$view.state,
+        dispatch = _this2$view.dispatch;
+      var pos = getPosSafely(_this2.getPos);
+      if (pos === undefined) {
+        return;
+      }
+      var nodeType = (0, _doc.getLinkNodeType)('inline', state.schema.nodes);
+      var tr = state.tr.setNodeMarkup(pos, nodeType, {
+        url: url
+      });
+      tr.setMeta('scrollIntoView', false);
+      return dispatch(tr);
+    });
     var sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
     _this2.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
-    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref2) {
-      var nextSharedState = _ref2.nextSharedState;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref3) {
+      var nextSharedState = _ref3.nextSharedState;
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
         _this2.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
         _this2.update(_this2.node, []); // required to update the width when page is resized.
@@ -144,7 +169,12 @@ var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var attrs = this.node.attrs;
-      return (0, _react2.jsx)("div", {
+      return (0, _react2.jsx)(_datasourceErrorBoundary.DatasourceErrorBoundary, {
+        handleError: this.updateNodeRemoveAttrs,
+        unsupportedComponent: _ui.UnsupportedInline,
+        view: this.view,
+        url: attrs.url
+      }, (0, _react2.jsx)("div", {
         className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
           minWidth: (0, _utils.calcBreakoutWidth)(attrs.layout, this.tableWidth)
@@ -153,7 +183,7 @@ var Datasource = /*#__PURE__*/function (_ReactNodeView) {
         node: this.node,
         view: this.view,
         getPos: this.getPos
-      }));
+      })));
     }
   }]);
   return Datasource;

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateExistingDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
+exports.updateExistingDatasource = exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = exports.insertDatasource = exports.handleFallbackWithAnalytics = exports.getLinkNodeType = exports.convertHyperlinkToSmartCard = exports.changeSelectedCardToText = exports.changeSelectedCardToLinkFallback = exports.changeSelectedCardToLink = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
@@ -429,6 +429,7 @@ var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
 };
 
 // Apply an update to a datasource (aka blockCard) node
+exports.getLinkNodeType = getLinkNodeType;
 var updateExistingDatasource = function updateExistingDatasource(state, node, newAdf, view) {
   var tr = state.tr,
     from = state.selection.from,

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "0.3.8",
+	"version": "0.4.0",
 	"sideEffects": false
 }

package/dist/es2019/datasourceErrorBoundary.js

@@ -0,0 +1,41 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+/* eslint-disable @repo/internal/react/no-class-components */
+import React from 'react';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { setSelectedCardAppearance } from './pm-plugins/doc';
+export class DatasourceErrorBoundary extends React.Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "state", {
+      isError: false
+    });
+  }
+  static getDerivedStateFromError(error) {
+    return {
+      isError: true
+    };
+  }
+  componentDidCatch(error) {
+    this.props.handleError();
+    // prevent re-render children with error
+    if (this.state.isError) {
+      this.setState({
+        isError: true
+      });
+    }
+  }
+  render() {
+    const {
+      url,
+      unsupportedComponent: UnsupportedComponent,
+      view
+    } = this.props;
+    if (this.state.isError) {
+      if (url && isSafeUrl(url)) {
+        return setSelectedCardAppearance('inline', undefined)(view.state, view.dispatch);
+      }
+      return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+    }
+    return this.props.children;
+  }
+}

package/dist/es2019/nodeviews/datasource.js

@@ -5,25 +5,25 @@ import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
+import { getLinkNodeType } from '../pm-plugins/doc';
+const getPosSafely = pos => {
+  if (!pos || typeof pos === 'boolean') {
+    return;
+  }
+  try {
+    return pos();
+  } catch (e) {
+    // Can blow up in rare cases, when node has been removed.
+  }
+};
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class DatasourceComponent extends React.PureComponent {
   constructor(props) {
     super(props);
-    _defineProperty(this, "getPosSafely", () => {
-      const {
-        getPos
-      } = this.props;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      try {
-        return getPos();
-      } catch (e) {
-        // Can blow up in rare cases, when node has been removed.
-      }
-    });
     _defineProperty(this, "getDatasource", () => this.props.node.attrs.datasource);
     _defineProperty(this, "getTableView", datasource => {
       const views = (datasource || this.getDatasource()).views;
@@ -34,7 +34,7 @@ export class DatasourceComponent extends React.PureComponent {
         state,
         dispatch
       } = this.props.view;
-      const pos = this.getPosSafely();
+      const pos = getPosSafely(this.props.getPos);
       if (pos === undefined) {
         return;
       }
@@ -57,6 +57,13 @@ export class DatasourceComponent extends React.PureComponent {
       tr.setMeta('scrollIntoView', false);
       dispatch(tr);
     });
+    _defineProperty(this, "onError", ({
+      err
+    }) => {
+      if (err) {
+        throw err;
+      }
+    });
   }
   render() {
     const cardContext = this.context.contextAdapter ? this.context.contextAdapter.card : undefined;
@@ -90,6 +97,26 @@ export class Datasource extends ReactNodeView {
   constructor(props) {
     var _props$pluginInjectio, _props$pluginInjectio2, _props$pluginInjectio3, _sharedState$currentS;
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    // this is necessary so that the datasource toolbar won't be rendered on error
+    _defineProperty(this, "updateNodeRemoveAttrs", () => {
+      const {
+        url
+      } = this.node.attrs;
+      const {
+        state,
+        dispatch
+      } = this.view;
+      const pos = getPosSafely(this.getPos);
+      if (pos === undefined) {
+        return;
+      }
+      const nodeType = getLinkNodeType('inline', state.schema.nodes);
+      const tr = state.tr.setNodeMarkup(pos, nodeType, {
+        url
+      });
+      tr.setMeta('scrollIntoView', false);
+      return dispatch(tr);
+    });
     const sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
     this.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
     sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
@@ -111,7 +138,12 @@ export class Datasource extends ReactNodeView {
     const {
       attrs
     } = this.node;
-    return jsx("div", {
+    return jsx(DatasourceErrorBoundary, {
+      handleError: this.updateNodeRemoveAttrs,
+      unsupportedComponent: UnsupportedInline,
+      view: this.view,
+      url: attrs.url
+    }, jsx("div", {
       className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
       style: {
         minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
@@ -120,6 +152,6 @@ export class Datasource extends ReactNodeView {
       node: this.node,
       view: this.view,
       getPos: this.getPos
-    }));
+    })));
   }
 }

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

@@ -382,7 +382,7 @@ export const setSelectedCardAppearance = (appearance, editorAnalyticsApi) => (st
   }
   return true;
 };
-const getLinkNodeType = (appearance, linkNodes) => {
+export const getLinkNodeType = (appearance, linkNodes) => {
   switch (appearance) {
     case 'inline':
       return linkNodes.inlineCard;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "0.3.8",
+	"version": "0.4.0",
 	"sideEffects": false
 }

package/dist/esm/datasourceErrorBoundary.js

@@ -0,0 +1,64 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+/* eslint-disable @repo/internal/react/no-class-components */
+import React from 'react';
+import { isSafeUrl } from '@atlaskit/adf-schema';
+import { setSelectedCardAppearance } from './pm-plugins/doc';
+export var DatasourceErrorBoundary = /*#__PURE__*/function (_React$Component) {
+  _inherits(DatasourceErrorBoundary, _React$Component);
+  var _super = _createSuper(DatasourceErrorBoundary);
+  function DatasourceErrorBoundary() {
+    var _this;
+    _classCallCheck(this, DatasourceErrorBoundary);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isError: false
+    });
+    return _this;
+  }
+  _createClass(DatasourceErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error) {
+      this.props.handleError();
+      // prevent re-render children with error
+      if (this.state.isError) {
+        this.setState({
+          isError: true
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        url = _this$props.url,
+        UnsupportedComponent = _this$props.unsupportedComponent,
+        view = _this$props.view;
+      if (this.state.isError) {
+        if (url && isSafeUrl(url)) {
+          return setSelectedCardAppearance('inline', undefined)(view.state, view.dispatch);
+        }
+        return /*#__PURE__*/React.createElement(UnsupportedComponent, null);
+      }
+      return this.props.children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      return {
+        isError: true
+      };
+    }
+  }]);
+  return DatasourceErrorBoundary;
+}(React.Component);

package/dist/esm/nodeviews/datasource.js

@@ -15,8 +15,21 @@ import { jsx } from '@emotion/react';
 import PropTypes from 'prop-types';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { DATASOURCE_INNER_CONTAINER_CLASSNAME, SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
+import { UnsupportedInline } from '@atlaskit/editor-common/ui';
 import { calcBreakoutWidth } from '@atlaskit/editor-common/utils';
 import { DatasourceTableView } from '@atlaskit/link-datasource';
+import { DatasourceErrorBoundary } from '../datasourceErrorBoundary';
+import { getLinkNodeType } from '../pm-plugins/doc';
+var getPosSafely = function getPosSafely(pos) {
+  if (!pos || typeof pos === 'boolean') {
+    return;
+  }
+  try {
+    return pos();
+  } catch (e) {
+    // Can blow up in rare cases, when node has been removed.
+  }
+};
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(DatasourceComponent, _React$PureComponent);
@@ -25,17 +38,6 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
     var _this;
     _classCallCheck(this, DatasourceComponent);
     _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "getPosSafely", function () {
-      var getPos = _this.props.getPos;
-      if (!getPos || typeof getPos === 'boolean') {
-        return;
-      }
-      try {
-        return getPos();
-      } catch (e) {
-        // Can blow up in rare cases, when node has been removed.
-      }
-    });
     _defineProperty(_assertThisInitialized(_this), "getDatasource", function () {
       return _this.props.node.attrs.datasource;
     });
@@ -49,7 +51,7 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       var _this$props$view = _this.props.view,
         state = _this$props$view.state,
         dispatch = _this$props$view.dispatch;
-      var pos = _this.getPosSafely();
+      var pos = getPosSafely(_this.props.getPos);
       if (pos === undefined) {
         return;
       }
@@ -72,6 +74,12 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       tr.setMeta('scrollIntoView', false);
       dispatch(tr);
     });
+    _defineProperty(_assertThisInitialized(_this), "onError", function (_ref) {
+      var err = _ref.err;
+      if (err) {
+        throw err;
+      }
+    });
     return _this;
   }
   _createClass(DatasourceComponent, [{
@@ -82,8 +90,8 @@ export var DatasourceComponent = /*#__PURE__*/function (_React$PureComponent) {
       var tableView = this.getTableView();
       if (tableView) {
         var _tableView$properties;
-        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref) {
-          var key = _ref.key;
+        var visibleColumnKeys = (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(function (_ref2) {
+          var key = _ref2.key;
           return key;
         });
 
@@ -115,10 +123,27 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     var _this2;
     _classCallCheck(this, Datasource);
     _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
+    // this is necessary so that the datasource toolbar won't be rendered on error
+    _defineProperty(_assertThisInitialized(_this2), "updateNodeRemoveAttrs", function () {
+      var url = _this2.node.attrs.url;
+      var _this2$view = _this2.view,
+        state = _this2$view.state,
+        dispatch = _this2$view.dispatch;
+      var pos = getPosSafely(_this2.getPos);
+      if (pos === undefined) {
+        return;
+      }
+      var nodeType = getLinkNodeType('inline', state.schema.nodes);
+      var tr = state.tr.setNodeMarkup(pos, nodeType, {
+        url: url
+      });
+      tr.setMeta('scrollIntoView', false);
+      return dispatch(tr);
+    });
     var sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.dependencies) === null || _props$pluginInjectio2 === void 0 ? void 0 : (_props$pluginInjectio3 = _props$pluginInjectio2.width) === null || _props$pluginInjectio3 === void 0 ? void 0 : _props$pluginInjectio3.sharedState;
     _this2.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
-    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref2) {
-      var nextSharedState = _ref2.nextSharedState;
+    sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(function (_ref3) {
+      var nextSharedState = _ref3.nextSharedState;
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
         _this2.tableWidth = nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width;
         _this2.update(_this2.node, []); // required to update the width when page is resized.
@@ -137,7 +162,12 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     key: "render",
     value: function render() {
       var attrs = this.node.attrs;
-      return jsx("div", {
+      return jsx(DatasourceErrorBoundary, {
+        handleError: this.updateNodeRemoveAttrs,
+        unsupportedComponent: UnsupportedInline,
+        view: this.view,
+        url: attrs.url
+      }, jsx("div", {
         className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
           minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
@@ -146,7 +176,7 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
         node: this.node,
         view: this.view,
         getPos: this.getPos
-      }));
+      })));
     }
   }]);
   return Datasource;

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

@@ -400,7 +400,7 @@ export var setSelectedCardAppearance = function setSelectedCardAppearance(appear
     return true;
   };
 };
-var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
+export var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
   switch (appearance) {
     case 'inline':
       return linkNodes.inlineCard;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "0.3.8",
+	"version": "0.4.0",
 	"sideEffects": false
 }

package/dist/types/datasourceErrorBoundary.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { APIError } from '@atlaskit/smart-card';
+import { DatasourceProps } from './nodeviews/datasource';
+export declare class DatasourceErrorBoundary extends React.Component<{
+    url?: string;
+    unsupportedComponent: React.ComponentType;
+    handleError: () => void;
+    view: DatasourceProps['view'];
+}> {
+    state: {
+        isError: boolean;
+    };
+    static getDerivedStateFromError(error: Error | APIError): {
+        isError: boolean;
+    };
+    componentDidCatch(error: Error | APIError): void;
+    render(): React.ReactNode;
+}

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

@@ -9,7 +9,7 @@ import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
-interface DatasourceProps extends ReactComponentProps {
+export interface DatasourceProps extends ReactComponentProps {
     node: PMNode;
     view: EditorView;
     getPos: getPosHandler;
@@ -25,15 +25,18 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
         contextAdapter: PropTypes.Requireable<object>;
     };
     constructor(props: DatasourceComponentProps);
-    private getPosSafely;
     private getDatasource;
     private getTableView;
     handleColumnChange: (columnKeys: string[]) => void;
+    onError: ({ err }: {
+        err?: Error | undefined;
+    }) => void;
     render(): jsx.JSX.Element | null;
 }
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     constructor(props: DatasourceProps);
+    updateNodeRemoveAttrs: () => void;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

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

@@ -3,7 +3,7 @@ import { ACTION, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardReplacementInputMethod } from '@atlaskit/editor-common/card';
 import { CardAdf, CardAppearance, DatasourceAdf } from '@atlaskit/editor-common/provider-factory';
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { InlineCardAdf } from '@atlaskit/smart-card';
@@ -18,5 +18,9 @@ export declare const changeSelectedCardToLinkFallback: (text?: string, href?: st
 export declare const updateCard: (href: string, sourceEvent?: UIAnalyticsEvent | null | undefined) => Command;
 export declare const changeSelectedCardToText: (text: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const setSelectedCardAppearance: (appearance: CardAppearance, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
+export type LinkNodes = {
+    [key in 'inlineCard' | 'blockCard' | 'embedCard']: NodeType;
+};
+export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
 export declare const updateExistingDatasource: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView) => void;
 export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf | InlineCardAdf, view: EditorView) => void;

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { APIError } from '@atlaskit/smart-card';
+import { DatasourceProps } from './nodeviews/datasource';
+export declare class DatasourceErrorBoundary extends React.Component<{
+    url?: string;
+    unsupportedComponent: React.ComponentType;
+    handleError: () => void;
+    view: DatasourceProps['view'];
+}> {
+    state: {
+        isError: boolean;
+    };
+    static getDerivedStateFromError(error: Error | APIError): {
+        isError: boolean;
+    };
+    componentDidCatch(error: Error | APIError): void;
+    render(): React.ReactNode;
+}

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

@@ -9,7 +9,7 @@ import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
 import { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { cardPlugin } from '../index';
-interface DatasourceProps extends ReactComponentProps {
+export interface DatasourceProps extends ReactComponentProps {
     node: PMNode;
     view: EditorView;
     getPos: getPosHandler;
@@ -25,15 +25,18 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
         contextAdapter: PropTypes.Requireable<object>;
     };
     constructor(props: DatasourceComponentProps);
-    private getPosSafely;
     private getDatasource;
     private getTableView;
     handleColumnChange: (columnKeys: string[]) => void;
+    onError: ({ err }: {
+        err?: Error | undefined;
+    }) => void;
     render(): jsx.JSX.Element | null;
 }
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
     constructor(props: DatasourceProps);
+    updateNodeRemoveAttrs: () => void;
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;
 }

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

@@ -3,7 +3,7 @@ import { ACTION, EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import type { CardReplacementInputMethod } from '@atlaskit/editor-common/card';
 import { CardAdf, CardAppearance, DatasourceAdf } from '@atlaskit/editor-common/provider-factory';
 import type { Command } from '@atlaskit/editor-common/types';
-import { Node } from '@atlaskit/editor-prosemirror/model';
+import { Node, NodeType } from '@atlaskit/editor-prosemirror/model';
 import { EditorState, Transaction } from '@atlaskit/editor-prosemirror/state';
 import { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { InlineCardAdf } from '@atlaskit/smart-card';
@@ -18,5 +18,9 @@ export declare const changeSelectedCardToLinkFallback: (text?: string, href?: st
 export declare const updateCard: (href: string, sourceEvent?: UIAnalyticsEvent | null | undefined) => Command;
 export declare const changeSelectedCardToText: (text: string, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
 export declare const setSelectedCardAppearance: (appearance: CardAppearance, editorAnalyticsApi: EditorAnalyticsAPI | undefined) => Command;
+export type LinkNodes = {
+    [key in 'inlineCard' | 'blockCard' | 'embedCard']: NodeType;
+};
+export declare const getLinkNodeType: (appearance: CardAppearance, linkNodes: LinkNodes) => NodeType;
 export declare const updateExistingDatasource: (state: EditorState, node: Node, newAdf: DatasourceAdf | InlineCardAdf, view: EditorView) => void;
 export declare const insertDatasource: (state: EditorState, adf: DatasourceAdf | InlineCardAdf, view: EditorView) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -31,9 +31,9 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/adf-schema": "^26.4.0",
+    "@atlaskit/adf-schema": "^27.0.0",
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/editor-common": "^74.34.0",
+    "@atlaskit/editor-common": "^74.36.0",
     "@atlaskit/editor-plugin-analytics": "^0.1.0",
     "@atlaskit/editor-plugin-decorations": "^0.1.0",
     "@atlaskit/editor-plugin-feature-flags": "^0.1.0",
@@ -42,12 +42,12 @@
     "@atlaskit/editor-plugin-hyperlink": "^0.2.0",
     "@atlaskit/editor-plugin-width": "^0.1.0",
     "@atlaskit/editor-prosemirror": "1.0.2",
-    "@atlaskit/editor-shared-styles": "^2.5.0",
+    "@atlaskit/editor-shared-styles": "^2.6.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/link-analytics": "^8.2.0",
     "@atlaskit/link-datasource": "^0.33.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/smart-card": "^26.14.0",
+    "@atlaskit/smart-card": "^26.15.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.14.0",
     "@babel/runtime": "^7.0.0",