@atlaskit/editor-plugin-card 1.14.1 → 1.14.3

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-card
 
+## 1.14.3
+
+### Patch Changes
+
+-   [#102406](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/102406)
+    [`4e5db5fc8294`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4e5db5fc8294) -
+    Minor refactors to improve type-safety. No expected functional changes.
+
+## 1.14.2
+
+### Patch Changes
+
+-   [#99680](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99680)
+    [`538e71f42af4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/538e71f42af4) -
+    Add code behind an FF to control what events are sent to prose mirror based on classnames, in
+    orderto control toolbar and selection behaviour for smart links in live pages.
+-   Updated dependencies
+
 ## 1.14.1
 
 ### Patch Changes

package/dist/cjs/nodeviews/blockCard.js

@@ -19,8 +19,10 @@ var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _reactNodeView = _interopRequireDefault(require("@atlaskit/editor-common/react-node-view"));
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _actions = require("../pm-plugins/actions");
+var _utils2 = require("../utils");
 var _genericCard = require("./genericCard");
 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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
@@ -153,6 +155,13 @@ var BlockCard = exports.BlockCard = /*#__PURE__*/function (_ReactNodeView) {
     key: "validUpdate",
     value: function validUpdate(currentNode, newNode) {
       var _currentNode$attrs, _newNode$attrs;
+      if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards')) {
+        var _isCurrentNodeBlockCard = !(0, _utils2.isDatasourceNode)(currentNode);
+        var _isNewNodeDatasource = (0, _utils2.isDatasourceNode)(newNode);
+
+        // need to return falsy to update node
+        return !(_isCurrentNodeBlockCard && _isNewNodeDatasource);
+      }
       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;
 

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

@@ -497,7 +497,9 @@ var updateCardViaDatasource = exports.updateCardViaDatasource = function updateC
     inputMethod: inputMethod
   });
   if (isDeletingConfig) {
-    (0, _actions.removeDatasourceStash)(tr, node.attrs.url);
+    if (typeof node.attrs.url === 'string') {
+      (0, _actions.removeDatasourceStash)(tr, node.attrs.url);
+    }
   } else {
     (0, _actions.hideDatasourceModal)(tr);
   }
@@ -531,19 +533,38 @@ var getAttrsForAppearance = exports.getAttrsForAppearance = function getAttrsFor
       layout: 'center'
     });
   }
-  if (selectedNode.attrs.datasource) {
-    return {
-      url: selectedNode.attrs.url
-    };
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards')) {
+    if ((0, _utils2.isDatasourceNode)(selectedNode)) {
+      return {
+        url: selectedNode.attrs.url
+      };
+    }
+  } else {
+    if (selectedNode.attrs.datasource) {
+      return {
+        url: selectedNode.attrs.url
+      };
+    }
   }
   return selectedNode.attrs;
 };
 var updateDatasourceStash = function updateDatasourceStash(tr, selectedNode) {
-  var _selectedNode$attrs;
-  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && selectedNode !== null && selectedNode !== void 0 && (_selectedNode$attrs = selectedNode.attrs) !== null && _selectedNode$attrs !== void 0 && _selectedNode$attrs.datasource && !(0, _utils2.isDatasourceConfigEditable)(selectedNode.attrs.datasource.id)) {
-    (0, _actions.setDatasourceStash)(tr, {
-      url: selectedNode.attrs.url,
-      views: selectedNode.attrs.datasource.views
-    });
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards')) {
+      if ((0, _utils2.isDatasourceNode)(selectedNode) && !(0, _utils2.isDatasourceConfigEditable)(selectedNode.attrs.datasource.id) && selectedNode.attrs.url) {
+        (0, _actions.setDatasourceStash)(tr, {
+          url: selectedNode.attrs.url,
+          views: selectedNode.attrs.datasource.views
+        });
+      }
+    } else {
+      var _selectedNode$attrs;
+      if (selectedNode !== null && selectedNode !== void 0 && (_selectedNode$attrs = selectedNode.attrs) !== null && _selectedNode$attrs !== void 0 && _selectedNode$attrs.datasource && !(0, _utils2.isDatasourceConfigEditable)(selectedNode.attrs.datasource.id)) {
+        (0, _actions.setDatasourceStash)(tr, {
+          url: selectedNode.attrs.url,
+          views: selectedNode.attrs.datasource.views
+        });
+      }
+    }
   }
 };

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

@@ -4,13 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.createPlugin = void 0;
+exports.createPlugin = exports.ALLOW_EVENTS_CLASSNAME = void 0;
 Object.defineProperty(exports, "pluginKey", {
   enumerable: true,
   get: function get() {
     return _pluginKey.pluginKey;
   }
 });
+exports.stopEvent = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
@@ -28,7 +29,8 @@ var _blockCard = require("../nodeviews/blockCard");
 var _datasource = require("../nodeviews/datasource");
 var _embedCard = require("../nodeviews/embedCard");
 var _inlineCard = require("../nodeviews/inlineCard");
-var _utils3 = require("../utils");
+var _utils3 = require("../ui/LayoutButton/utils");
+var _utils4 = require("../utils");
 var _actions = require("./actions");
 var _pluginKey = require("./plugin-key");
 var _reducers = _interopRequireDefault(require("./reducers"));
@@ -37,6 +39,19 @@ var _state2 = require("./util/state");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+var ALLOW_EVENTS_CLASSNAME = exports.ALLOW_EVENTS_CLASSNAME = 'card-plugin-element-allow-events';
+var stopEvent = exports.stopEvent = function stopEvent(event) {
+  if (!(0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-links-in-live-pages')) {
+    return false;
+  }
+  var target = event.target;
+  // Stop events from propogating to prose-mirror and selecting the node and/or
+  // opening the toolbar, unless a parent of the target has a defined className
+  if (target instanceof HTMLElement && target.closest(".".concat(ALLOW_EVENTS_CLASSNAME))) {
+    return false;
+  }
+  return true;
+};
 var handleAwarenessOverlay = function handleAwarenessOverlay(view) {
   var currentState = (0, _state2.getPluginState)(view.state);
   var overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -75,6 +90,9 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
         allowBlockCards: allowBlockCards,
         pluginInjectionApi: pluginInjectionApi,
         onClickCallback: onClickCallback
+      },
+      extraNodeViewProps: {
+        stopEvent: stopEvent
       }
     });
     return new _safePlugin.SafePlugin({
@@ -131,8 +149,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             return newState;
           }
           var linkPosition = pluginState.requests[0].pos;
-          var canBeUpgradedToBlock = allowBlockCards && (0, _utils3.isBlockSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
-          var canBeUpgradedToEmbed = allowEmbeds && (0, _utils3.isEmbedSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
+          var canBeUpgradedToBlock = allowBlockCards && (0, _utils4.isBlockSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
+          var canBeUpgradedToEmbed = allowEmbeds && (0, _utils4.isEmbedSupportedAtPosition)(linkPosition, prevEditorState, 'inline');
           if (canBeUpgradedToBlock || canBeUpgradedToEmbed) {
             newState.overlayCandidatePosition = linkPosition;
           }
@@ -168,8 +186,12 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
               var shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
               if (isDatasource && shouldUpdateTableRef) {
                 var _node$attrs2;
+                var getLayout = function getLayout() {
+                  return (0, _utils3.isDatasourceTableLayout)(node.attrs.layout) ? node.attrs.layout : _linkingCommon.DATASOURCE_DEFAULT_LAYOUT;
+                };
+
                 // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
-                var layout = (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || _linkingCommon.DATASOURCE_DEFAULT_LAYOUT;
+                var layout = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards') ? getLayout() : (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || _linkingCommon.DATASOURCE_DEFAULT_LAYOUT;
                 var isNested = selection.$anchor.depth > 0;
 
                 // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
@@ -241,7 +263,7 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
               onClickCallback: options.onClickCallback
             };
             var hasIntlContext = true;
-            var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
+            var isDatasource = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards') ? (0, _utils4.isDatasourceNode)(node) : !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
             if (isDatasource) {
               var _node$attrs4;
               if (options.allowDatasource && platform !== 'mobile' && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 || (_node$attrs4 = _node$attrs4.datasource) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.id)) {

package/dist/cjs/toolbar.js

@@ -206,7 +206,7 @@ var generateToolbarItems = function generateToolbarItems(state, intl, providerFa
     var currentAppearance = (0, _utils3.appearanceForNodeType)(node.type);
     var _ref2 = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
       hoverDecoration = _ref2.hoverDecoration;
-    var isDatasource = currentAppearance === 'block' && (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
+    var isDatasource = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards') ? (0, _utils3.isDatasourceNode)(node) : currentAppearance === 'block' && (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
     var shouldRenderDatasourceToolbar = isDatasource &&
     // not showing toolbar in mobile for now since not sure what our plans are for it
     platform !== 'mobile' && cardOptions.allowDatasource && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 || (_node$attrs2 = _node$attrs2.datasource) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.id);

package/dist/cjs/ui/LayoutButton/index.js

@@ -16,9 +16,11 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _collapse = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/collapse"));
 var _expand = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/expand"));
 var _linkingCommon = require("@atlaskit/linking-common");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _actions = require("../../pm-plugins/actions");
-var _utils2 = require("./utils");
+var _utils2 = require("../../utils");
+var _utils3 = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /** @jsx jsx */
 var toolbarButtonWrapperStyles = (0, _react2.css)({
@@ -81,17 +83,20 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     api = _ref2.api;
   var _useSharedPluginState = (0, _hooks.useSharedPluginState)(api, ['card']),
     cardState = _useSharedPluginState.cardState;
-  var _getDatasource = (0, _utils2.getDatasource)(editorView),
+  var _getDatasource = (0, _utils3.getDatasource)(editorView),
     node = _getDatasource.node,
     pos = _getDatasource.pos;
+  var isDatasource = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards') ? (0, _utils2.isDatasourceNode)(node) : !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
+  if (!isDatasource) {
+    return null;
+  }
 
   //  If layout doesn't exist in ADF it returns null, we want to change to undefined
   //  which results in default parameter value being used in LayoutButton.
   var _ref3 = cardState !== null && cardState !== void 0 ? cardState : {},
     datasourceTableRef = _ref3.datasourceTableRef,
     _ref3$layout = _ref3.layout,
-    layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined : _ref3$layout;
-  var isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
+    layout = _ref3$layout === void 0 ? (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || undefined : _ref3$layout;
   var onLayoutChange = function onLayoutChange(layout) {
     var _getDatasource$node;
     if (pos === undefined) {
@@ -100,22 +105,19 @@ var LayoutButtonWrapper = function LayoutButtonWrapper(_ref2) {
     var state = editorView.state,
       dispatch = editorView.dispatch;
     // If the button does not re-render due to no card state change, node reference will be stale
-    var datasourceNode = (_getDatasource$node = (0, _utils2.getDatasource)(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
+    var datasourceNode = (_getDatasource$node = (0, _utils3.getDatasource)(editorView).node) !== null && _getDatasource$node !== void 0 ? _getDatasource$node : node;
     var tr = state.tr.setNodeMarkup(pos, undefined, _objectSpread(_objectSpread({}, datasourceNode === null || datasourceNode === void 0 ? void 0 : datasourceNode.attrs), {}, {
       layout: layout
     }));
     tr.setMeta('scrollIntoView', false);
     dispatch((0, _actions.setCardLayout)(layout)(tr));
   };
-  if (!isDatasource) {
-    return null;
-  }
   return (0, _react2.jsx)(LayoutButton, {
     mountPoint: mountPoint,
     scrollableElement: scrollableElement,
     boundariesElement: boundariesElement,
     targetElement: datasourceTableRef,
-    layout: layout,
+    layout: (0, _utils3.isDatasourceTableLayout)(layout) ? layout : undefined,
     onLayoutChange: onLayoutChange,
     intl: intl
   });

package/dist/cjs/ui/LayoutButton/types.js

@@ -2,4 +2,6 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
+});
+exports.DATASOURCE_TABLE_LAYOUTS = void 0;
+var DATASOURCE_TABLE_LAYOUTS = exports.DATASOURCE_TABLE_LAYOUTS = ['full-width', 'center', 'wide'];

package/dist/cjs/ui/LayoutButton/utils.js

@@ -1,18 +1,42 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDatasource = void 0;
+exports.isDatasourceTableLayout = exports.getDatasource = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _utils2 = require("../../utils");
+var _types = require("./types");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var getDatasource = exports.getDatasource = function getDatasource(editorView) {
   var _findSelectedNodeOfTy;
   var _editorView$state = editorView.state,
     selection = _editorView$state.selection,
     schema = _editorView$state.schema;
   var blockCard = schema.nodes.blockCard;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.editor-datasource-typeguards')) {
+    var findResult = (0, _utils.findSelectedNodeOfType)([blockCard])(selection);
+    if (findResult && (0, _utils2.isDatasourceNode)(findResult.node)) {
+      return _objectSpread(_objectSpread({}, findResult), {}, {
+        node: findResult.node
+      });
+    }
+    return {
+      node: undefined,
+      pos: undefined
+    };
+  }
   return (_findSelectedNodeOfTy = (0, _utils.findSelectedNodeOfType)([blockCard])(selection)) !== null && _findSelectedNodeOfTy !== void 0 ? _findSelectedNodeOfTy : {
     node: undefined,
     pos: undefined
   };
+};
+var isDatasourceTableLayout = exports.isDatasourceTableLayout = function isDatasourceTableLayout(layout) {
+  return _types.DATASOURCE_TABLE_LAYOUTS.some(function (l) {
+    return l === layout;
+  });
 };

package/dist/cjs/utils.js

@@ -1,9 +1,11 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceConfigEditable = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+exports.titleUrlPairFromNode = exports.selectedCardAppearance = exports.mergeCardInfo = exports.isEmbedSupportedAtPosition = exports.isDatasourceNode = exports.isDatasourceConfigEditable = exports.isDatasourceAdfAttributes = exports.isBlockSupportedAtPosition = exports.getResolvedAttributesFromStore = exports.findCardInfo = exports.displayInfoForCard = exports.appearanceForNodeType = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _resolvedAttributes = require("@atlaskit/link-analytics/resolved-attributes");
@@ -84,4 +86,40 @@ var isDatasourceConfigEditable = exports.isDatasourceConfigEditable = function i
     datasourcesWithConfigModal.push(_linkDatasource.CONFLUENCE_SEARCH_DATASOURCE_ID);
   }
   return datasourcesWithConfigModal.includes(datasourceId);
+};
+
+/**
+ * Typeguard that checks node attributes are datasource node attributes
+ * ** WARNING ** Typeguards are not a guarantee, if the asserted type changes
+ * this function will not be updated automatically
+ */
+var isDatasourceAdfAttributes = exports.isDatasourceAdfAttributes = function isDatasourceAdfAttributes(attrs) {
+  // Check is attributes object
+  if (!((0, _typeof2.default)(attrs) === 'object' && attrs !== null)) {
+    return false;
+  }
+
+  // Check datasource attribute is an object
+  if (!('datasource' in attrs)) {
+    return false;
+  }
+  if ((0, _typeof2.default)(attrs.datasource) !== 'object' || attrs.datasource === null) {
+    return false;
+  }
+  var hasId = 'id' in attrs.datasource && typeof attrs.datasource.id === 'string';
+  var hasParameters = 'parameters' in attrs.datasource && (0, _typeof2.default)(attrs.datasource.parameters) === 'object' && attrs.datasource.parameters !== null && !Array.isArray(attrs.datasource.parameters);
+  var hasViews = 'views' in attrs.datasource && Array.isArray(attrs.datasource.views);
+  return hasId && hasParameters && hasViews;
+};
+
+/**
+ * Typeguard that checks a node is a datasource node (blockCard and has datasource attributes)
+ * ** WARNING ** Typeguards are not a guarantee, if the asserted type changes
+ * this function will not be updated automatically
+ */
+var isDatasourceNode = exports.isDatasourceNode = function isDatasourceNode(node) {
+  if (!node) {
+    return false;
+  }
+  return node.type.name === 'blockCard' && isDatasourceAdfAttributes(node.attrs);
 };

package/dist/es2019/nodeviews/blockCard.js

@@ -5,8 +5,10 @@ import rafSchedule from 'raf-schd';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
 import { findOverflowScrollParent, UnsupportedBlock } from '@atlaskit/editor-common/ui';
 import { browser } from '@atlaskit/editor-common/utils';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
+import { isDatasourceNode } from '../utils';
 import { Card } from './genericCard';
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -122,6 +124,13 @@ export class BlockCard extends ReactNodeView {
   // 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;
+    if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+      const isCurrentNodeBlockCard = !isDatasourceNode(currentNode);
+      const isNewNodeDatasource = isDatasourceNode(newNode);
+
+      // need to return falsy to update node
+      return !(isCurrentNodeBlockCard && isNewNodeDatasource);
+    }
     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;
 

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

@@ -6,7 +6,7 @@ import { getLinkCreationAnalyticsEvent, isFromCurrentDomain, nodesBetweenChanged
 import { closeHistory } from '@atlaskit/editor-prosemirror/history';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
-import { appearanceForNodeType, isDatasourceConfigEditable, selectedCardAppearance } from '../utils';
+import { appearanceForNodeType, isDatasourceConfigEditable, isDatasourceNode, selectedCardAppearance } from '../utils';
 import { hideDatasourceModal, queueCards, removeDatasourceStash, resolveCard, setDatasourceStash } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
@@ -475,7 +475,9 @@ export const updateCardViaDatasource = args => {
     inputMethod
   });
   if (isDeletingConfig) {
-    removeDatasourceStash(tr, node.attrs.url);
+    if (typeof node.attrs.url === 'string') {
+      removeDatasourceStash(tr, node.attrs.url);
+    }
   } else {
     hideDatasourceModal(tr);
   }
@@ -518,19 +520,38 @@ export const getAttrsForAppearance = (appearance, selectedNode) => {
       layout: 'center'
     };
   }
-  if (selectedNode.attrs.datasource) {
-    return {
-      url: selectedNode.attrs.url
-    };
+  if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+    if (isDatasourceNode(selectedNode)) {
+      return {
+        url: selectedNode.attrs.url
+      };
+    }
+  } else {
+    if (selectedNode.attrs.datasource) {
+      return {
+        url: selectedNode.attrs.url
+      };
+    }
   }
   return selectedNode.attrs;
 };
 const updateDatasourceStash = (tr, selectedNode) => {
-  var _selectedNode$attrs;
-  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && selectedNode !== null && selectedNode !== void 0 && (_selectedNode$attrs = selectedNode.attrs) !== null && _selectedNode$attrs !== void 0 && _selectedNode$attrs.datasource && !isDatasourceConfigEditable(selectedNode.attrs.datasource.id)) {
-    setDatasourceStash(tr, {
-      url: selectedNode.attrs.url,
-      views: selectedNode.attrs.datasource.views
-    });
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    if (getBooleanFF('platform.linking-platform.editor-datasource-typeguards')) {
+      if (isDatasourceNode(selectedNode) && !isDatasourceConfigEditable(selectedNode.attrs.datasource.id) && selectedNode.attrs.url) {
+        setDatasourceStash(tr, {
+          url: selectedNode.attrs.url,
+          views: selectedNode.attrs.datasource.views
+        });
+      }
+    } else {
+      var _selectedNode$attrs;
+      if (selectedNode !== null && selectedNode !== void 0 && (_selectedNode$attrs = selectedNode.attrs) !== null && _selectedNode$attrs !== void 0 && _selectedNode$attrs.datasource && !isDatasourceConfigEditable(selectedNode.attrs.datasource.id)) {
+        setDatasourceStash(tr, {
+          url: selectedNode.attrs.url,
+          views: selectedNode.attrs.datasource.views
+        });
+      }
+    }
   }
 };

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

@@ -13,7 +13,8 @@ import { BlockCard } from '../nodeviews/blockCard';
 import { Datasource } from '../nodeviews/datasource';
 import { EmbedCard } from '../nodeviews/embedCard';
 import { InlineCardNodeView } from '../nodeviews/inlineCard';
-import { isBlockSupportedAtPosition, isEmbedSupportedAtPosition } from '../utils';
+import { isDatasourceTableLayout } from '../ui/LayoutButton/utils';
+import { isBlockSupportedAtPosition, isDatasourceNode, isEmbedSupportedAtPosition } from '../utils';
 import { clearOverlayCandidate, setCardLayoutAndDatasourceTableRef, setDatasourceTableRef } from './actions';
 import { pluginKey } from './plugin-key';
 import reducer from './reducers';
@@ -21,6 +22,19 @@ import { handleProvider, resolveWithProvider } from './util/resolve';
 import { getNewRequests, getPluginState, getPluginStateWithUpdatedPos } from './util/state';
 export { pluginKey } from './plugin-key';
 const LOCAL_STORAGE_DISCOVERY_KEY_SMART_LINK = 'smart-link-upgrade-pulse';
+export const ALLOW_EVENTS_CLASSNAME = 'card-plugin-element-allow-events';
+export const stopEvent = event => {
+  if (!getBooleanFF('platform.linking-platform.smart-links-in-live-pages')) {
+    return false;
+  }
+  const target = event.target;
+  // Stop events from propogating to prose-mirror and selecting the node and/or
+  // opening the toolbar, unless a parent of the target has a defined className
+  if (target instanceof HTMLElement && target.closest(`.${ALLOW_EVENTS_CLASSNAME}`)) {
+    return false;
+  }
+  return true;
+};
 const handleAwarenessOverlay = view => {
   const currentState = getPluginState(view.state);
   const overlayCandidatePos = currentState === null || currentState === void 0 ? void 0 : currentState.overlayCandidatePosition;
@@ -60,6 +74,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
       allowBlockCards,
       pluginInjectionApi,
       onClickCallback
+    },
+    extraNodeViewProps: {
+      stopEvent
     }
   });
   return new SafePlugin({
@@ -158,8 +175,12 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
             const shouldUpdateTableRef = datasourceTableRef && (currentState === null || currentState === void 0 ? void 0 : currentState.datasourceTableRef) !== datasourceTableRef;
             if (isDatasource && shouldUpdateTableRef) {
               var _node$attrs2;
+              const getLayout = () => {
+                return isDatasourceTableLayout(node.attrs.layout) ? node.attrs.layout : DATASOURCE_DEFAULT_LAYOUT;
+              };
+
               // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
-              const layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || DATASOURCE_DEFAULT_LAYOUT;
+              const layout = getBooleanFF('platform.linking-platform.editor-datasource-typeguards') ? getLayout() : (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || DATASOURCE_DEFAULT_LAYOUT;
               const isNested = selection.$anchor.depth > 0;
 
               // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
@@ -233,7 +254,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
             onClickCallback: options.onClickCallback
           };
           const hasIntlContext = true;
-          const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
+          const isDatasource = getBooleanFF('platform.linking-platform.editor-datasource-typeguards') ? isDatasourceNode(node) : !!(node !== null && node !== void 0 && (_node$attrs3 = node.attrs) !== null && _node$attrs3 !== void 0 && _node$attrs3.datasource);
           if (isDatasource) {
             var _node$attrs4, _node$attrs4$datasour;
             if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : (_node$attrs4$datasour = _node$attrs4.datasource) === null || _node$attrs4$datasour === void 0 ? void 0 : _node$attrs4$datasour.id)) {

package/dist/es2019/toolbar.js

@@ -21,7 +21,7 @@ import { editDatasource, EditDatasourceButton } from './ui/EditDatasourceButton'
 import { buildEditLinkToolbar, editLink, editLinkToolbarConfig } from './ui/EditLinkToolbar';
 import { LinkToolbarAppearance } from './ui/LinkToolbarAppearance';
 import { ToolbarViewedEvent } from './ui/ToolbarViewedEvent';
-import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, titleUrlPairFromNode } from './utils';
+import { appearanceForNodeType, displayInfoForCard, findCardInfo, isDatasourceConfigEditable, isDatasourceNode, titleUrlPairFromNode } from './utils';
 export const removeCard = editorAnalyticsApi => commandWithMetadata((state, dispatch) => {
   if (!(state.selection instanceof NodeSelection)) {
     return false;
@@ -198,7 +198,7 @@ const generateToolbarItems = (state, intl, providerFactory, cardOptions, lpLinkP
   const {
     hoverDecoration
   } = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.decorations) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.actions) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {};
-  const isDatasource = currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
+  const isDatasource = getBooleanFF('platform.linking-platform.editor-datasource-typeguards') ? isDatasourceNode(node) : currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
   const shouldRenderDatasourceToolbar = isDatasource &&
   // not showing toolbar in mobile for now since not sure what our plans are for it
   platform !== 'mobile' && cardOptions.allowDatasource && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : (_node$attrs2$datasour = _node$attrs2.datasource) === null || _node$attrs2$datasour === void 0 ? void 0 : _node$attrs2$datasour.id);

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

@@ -9,9 +9,11 @@ import { getNextBreakoutMode, getTitle } from '@atlaskit/editor-common/utils';
 import CollapseIcon from '@atlaskit/icon/glyph/editor/collapse';
 import ExpandIcon from '@atlaskit/icon/glyph/editor/expand';
 import { DATASOURCE_DEFAULT_LAYOUT } from '@atlaskit/linking-common';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B300, N20A, N300 } from '@atlaskit/theme/colors';
 import { setCardLayout } from '../../pm-plugins/actions';
-import { getDatasource } from './utils';
+import { isDatasourceNode } from '../../utils';
+import { getDatasource, isDatasourceTableLayout } from './utils';
 const toolbarButtonWrapperStyles = css({
   background: `${`var(--ds-background-neutral, ${N20A})`}`,
   color: `${`var(--ds-icon, ${N300})`}`,
@@ -79,14 +81,17 @@ const LayoutButtonWrapper = ({
     node,
     pos
   } = getDatasource(editorView);
+  const isDatasource = getBooleanFF('platform.linking-platform.editor-datasource-typeguards') ? isDatasourceNode(node) : !!(node !== null && node !== void 0 && (_node$attrs = node.attrs) !== null && _node$attrs !== void 0 && _node$attrs.datasource);
+  if (!isDatasource) {
+    return null;
+  }
 
   //  If layout doesn't exist in ADF it returns null, we want to change to undefined
   //  which results in default parameter value being used in LayoutButton.
   const {
     datasourceTableRef,
-    layout = (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.layout) || undefined
+    layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || undefined
   } = cardState !== null && cardState !== void 0 ? cardState : {};
-  const isDatasource = !!(node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.datasource);
   const onLayoutChange = layout => {
     var _getDatasource$node;
     if (pos === undefined) {
@@ -105,15 +110,12 @@ const LayoutButtonWrapper = ({
     tr.setMeta('scrollIntoView', false);
     dispatch(setCardLayout(layout)(tr));
   };
-  if (!isDatasource) {
-    return null;
-  }
   return jsx(LayoutButton, {
     mountPoint: mountPoint,
     scrollableElement: scrollableElement,
     boundariesElement: boundariesElement,
     targetElement: datasourceTableRef,
-    layout: layout,
+    layout: isDatasourceTableLayout(layout) ? layout : undefined,
     onLayoutChange: onLayoutChange,
     intl: intl
   });

package/dist/es2019/ui/LayoutButton/types.js

@@ -1 +1 @@
-export {};
+export const DATASOURCE_TABLE_LAYOUTS = ['full-width', 'center', 'wide'];