@atlaskit/editor-plugin-card 1.1.0 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-card
 
+## 1.1.1
+
+### Patch Changes
+
+- [#76864](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/76864) [`7ef524e422c3`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/7ef524e422c3) - Fixes switching card view from inline to Datasources
+- Updated dependencies
+
 ## 1.1.0
 
 ### Minor Changes

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

@@ -434,7 +434,9 @@ var getLinkNodeType = exports.getLinkNodeType = function getLinkNodeType(appeara
 // Apply an update made from a datasource ui interaction
 var updateCardViaDatasource = exports.updateCardViaDatasource = function updateCardViaDatasource(state, node, newAdf, view, sourceEvent, isDeletingConfig) {
   var tr = state.tr,
-    from = state.selection.from,
+    _state$selection2 = state.selection,
+    from = _state$selection2.from,
+    to = _state$selection2.to,
     schemaNodes = state.schema.nodes;
   if (newAdf.type === 'blockCard') {
     var _node$attrs, _newAdf$attrs;
@@ -458,6 +460,28 @@ var updateCardViaDatasource = exports.updateCardViaDatasource = function updateC
       if (isColumnChange || isUrlChange) {
         tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
       }
+    } else if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && node.type.isText) {
+      // url to datasource
+      var link;
+      state.doc.nodesBetween(from, to, function (node, pos) {
+        // get the actual start position of a link within the node
+        var linkMark = node.marks.find(function (mark) {
+          return mark.type === state.schema.marks.link;
+        });
+        if (linkMark) {
+          link = {
+            url: linkMark.attrs.href,
+            text: node.text,
+            pos: pos
+          };
+          return false;
+        }
+        return true;
+      });
+      if (link) {
+        var newNode = schemaNodes.blockCard.createChecked(newAdf.attrs);
+        tr.replaceWith(link.pos, link.pos + (link.text || link.url).length, [newNode]);
+      }
     } else {
       // inline or blockCard to datasource
       tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);

package/dist/cjs/ui/DatasourceAppearanceButton.js

@@ -13,6 +13,7 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _table = _interopRequireDefault(require("@atlaskit/icon/glyph/table"));
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _doc = require("../pm-plugins/doc");
 var _pluginKey = require("../pm-plugins/plugin-key");
@@ -51,7 +52,24 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
       }]
     }, url);
     var selection = editorState.selection;
-    var existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
+    var existingNode;
+    if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      // Check if the selection contains a link mark
+      var $pos = editorState.doc.resolve(selection.from);
+      var isLinkMark = $pos.marks().some(function (mark) {
+        return mark.type === editorState.schema.marks.link;
+      });
+
+      // When selection is a TextNode and a link Mark is present return that node
+      if (selection instanceof _state.NodeSelection) {
+        existingNode = selection.node;
+      } else if (isLinkMark) {
+        var _editorState$doc$node;
+        existingNode = (_editorState$doc$node = editorState.doc.nodeAt(selection.from)) !== null && _editorState$doc$node !== void 0 ? _editorState$doc$node : undefined;
+      }
+    } else {
+      existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
+    }
     if (existingNode) {
       (0, _doc.updateCardViaDatasource)(editorState, existingNode, newAdf, editorView, undefined, true);
     }

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

@@ -11,6 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _react = _interopRequireWildcard(require("react"));
 var _state = require("@atlaskit/editor-prosemirror/state");
 var _linkDatasource = require("@atlaskit/link-datasource");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _actions = require("../../pm-plugins/actions");
 var _doc = require("../../pm-plugins/doc");
 var _useFetchDatasourceInfo = require("../useFetchDatasourceInfo");
@@ -19,20 +20,37 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 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 DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
-  var _existingNode$attrs, _existingNode$attrs2;
+  var _existingNode, _existingNode2, _existingNode3;
   var view = _ref.view,
     modalType = _ref.modalType,
     cardContext = _ref.cardContext;
   var dispatch = view.dispatch,
     state = view.state;
   var selection = state.selection;
-  var existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
-  var isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  var existingNode;
+  if ((0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    // Check if the selection contains a link mark
+    var $pos = state.doc.resolve(selection.from);
+    var isLinkMark = $pos.marks().some(function (mark) {
+      return mark.type === state.schema.marks.link;
+    });
+
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof _state.NodeSelection) {
+      existingNode = selection.node;
+    } else if (isLinkMark) {
+      var _state$doc$nodeAt;
+      existingNode = (_state$doc$nodeAt = state.doc.nodeAt(selection.from)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined;
+    }
+  } else {
+    existingNode = selection instanceof _state.NodeSelection ? selection.node : undefined;
+  }
+  var isRegularCardNode = !!(existingNode && !((_existingNode = existingNode) !== null && _existingNode !== void 0 && (_existingNode = _existingNode.attrs) !== null && _existingNode !== void 0 && _existingNode.datasource));
   var _useFetchDatasourceIn = (0, _useFetchDatasourceInfo.useFetchDatasourceInfo)({
       isRegularCardNode: isRegularCardNode,
-      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      url: (_existingNode2 = existingNode) === null || _existingNode2 === void 0 ? void 0 : _existingNode2.attrs.url,
       cardContext: cardContext,
-      nodeParameters: existingNode === null || existingNode === void 0 || (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 || (_existingNode$attrs2 = _existingNode$attrs2.datasource) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.parameters
+      nodeParameters: (_existingNode3 = existingNode) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.attrs) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.datasource) === null || _existingNode3 === void 0 ? void 0 : _existingNode3.parameters
     }),
     parameters = _useFetchDatasourceIn.parameters,
     ready = _useFetchDatasourceIn.ready;
@@ -56,11 +74,11 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
     }
   }, [existingNode, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs3, _tableView$properties;
+    var _existingNode4, _tableView$properties, _existingNode5;
     if (!ready) {
       return null;
     }
-    var _ref2 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs3 = existingNode.attrs) === null || _existingNode$attrs3 === void 0 ? void 0 : _existingNode$attrs3.datasource) || {},
+    var _ref2 = ((_existingNode4 = existingNode) === null || _existingNode4 === void 0 || (_existingNode4 = _existingNode4.attrs) === null || _existingNode4 === void 0 ? void 0 : _existingNode4.datasource) || {},
       _ref2$id = _ref2.id,
       datasourceId = _ref2$id === void 0 ? _linkDatasource.JIRA_LIST_OF_LINKS_DATASOURCE_ID : _ref2$id,
       _ref2$views = _ref2.views,
@@ -79,14 +97,14 @@ var DatasourceModal = exports.DatasourceModal = function DatasourceModal(_ref) {
       ,
       visibleColumnKeys: visibleColumnKeys,
       parameters: parameters,
-      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      url: (_existingNode5 = existingNode) === null || _existingNode5 === void 0 ? void 0 : _existingNode5.attrs.url,
       onCancel: onClose,
       onInsert: onInsert
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs4, _tableView$properties2;
-    var _ref5 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs4 = existingNode.attrs) === null || _existingNode$attrs4 === void 0 ? void 0 : _existingNode$attrs4.datasource) || {},
+    var _existingNode6, _tableView$properties2;
+    var _ref5 = ((_existingNode6 = existingNode) === null || _existingNode6 === void 0 || (_existingNode6 = _existingNode6.attrs) === null || _existingNode6 === void 0 ? void 0 : _existingNode6.datasource) || {},
       _ref5$id = _ref5.id,
       _datasourceId = _ref5$id === void 0 ? _linkDatasource.ASSETS_LIST_OF_LINKS_DATASOURCE_ID : _ref5$id,
       _parameters = _ref5.parameters,

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -16,7 +16,9 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
+var _DatasourceAppearanceButton = require("./DatasourceAppearanceButton");
 var _EditDatasourceButton = require("./EditDatasourceButton");
 var _LinkToolbarAppearance = require("./LinkToolbarAppearance");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -175,6 +177,12 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
+      }), (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/_react.default.createElement(_DatasourceAppearanceButton.DatasourceAppearanceButton, {
+        intl: intl,
+        url: url,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
       }));
     }
   }]);

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

@@ -410,7 +410,8 @@ export const updateCardViaDatasource = (state, node, newAdf, view, sourceEvent,
   const {
     tr,
     selection: {
-      from
+      from,
+      to
     },
     schema: {
       nodes: schemaNodes
@@ -433,6 +434,26 @@ export const updateCardViaDatasource = (state, node, newAdf, view, sourceEvent,
           ...newAdf.attrs
         });
       }
+    } else if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && node.type.isText) {
+      // url to datasource
+      let link;
+      state.doc.nodesBetween(from, to, (node, pos) => {
+        // get the actual start position of a link within the node
+        const linkMark = node.marks.find(mark => mark.type === state.schema.marks.link);
+        if (linkMark) {
+          link = {
+            url: linkMark.attrs.href,
+            text: node.text,
+            pos
+          };
+          return false;
+        }
+        return true;
+      });
+      if (link) {
+        const newNode = schemaNodes.blockCard.createChecked(newAdf.attrs);
+        tr.replaceWith(link.pos, link.pos + (link.text || link.url).length, [newNode]);
+      }
     } else {
       // inline or blockCard to datasource
       tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);

package/dist/es2019/ui/DatasourceAppearanceButton.js

@@ -7,6 +7,7 @@ import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import TableIcon from '@atlaskit/icon/glyph/table';
 import { buildDatasourceAdf } from '@atlaskit/link-datasource';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { updateCardViaDatasource } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -47,7 +48,22 @@ const DatasourceAppearanceButtonWithCardContext = ({
     const {
       selection
     } = editorState;
-    const existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    let existingNode;
+    if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      // Check if the selection contains a link mark
+      const $pos = editorState.doc.resolve(selection.from);
+      const isLinkMark = $pos.marks().some(mark => mark.type === editorState.schema.marks.link);
+
+      // When selection is a TextNode and a link Mark is present return that node
+      if (selection instanceof NodeSelection) {
+        existingNode = selection.node;
+      } else if (isLinkMark) {
+        var _editorState$doc$node;
+        existingNode = (_editorState$doc$node = editorState.doc.nodeAt(selection.from)) !== null && _editorState$doc$node !== void 0 ? _editorState$doc$node : undefined;
+      }
+    } else {
+      existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    }
     if (existingNode) {
       updateCardViaDatasource(editorState, existingNode, newAdf, editorView, undefined, true);
     }

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

@@ -1,6 +1,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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
 import { insertDatasource, updateCardViaDatasource } from '../../pm-plugins/doc';
 import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
@@ -9,7 +10,7 @@ export const DatasourceModal = ({
   modalType,
   cardContext
 }) => {
-  var _existingNode$attrs, _existingNode$attrs2, _existingNode$attrs2$;
+  var _existingNode, _existingNode$attrs, _existingNode2, _existingNode3, _existingNode3$attrs, _existingNode3$attrs$;
   const {
     dispatch,
     state
@@ -17,16 +18,31 @@ export const DatasourceModal = ({
   const {
     selection
   } = state;
-  const existingNode = selection instanceof NodeSelection ? selection.node : undefined;
-  const isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  let existingNode;
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    // Check if the selection contains a link mark
+    const $pos = state.doc.resolve(selection.from);
+    const isLinkMark = $pos.marks().some(mark => mark.type === state.schema.marks.link);
+
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof NodeSelection) {
+      existingNode = selection.node;
+    } else if (isLinkMark) {
+      var _state$doc$nodeAt;
+      existingNode = (_state$doc$nodeAt = state.doc.nodeAt(selection.from)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined;
+    }
+  } else {
+    existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  }
+  const isRegularCardNode = !!(existingNode && !((_existingNode = existingNode) !== null && _existingNode !== void 0 && (_existingNode$attrs = _existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
   const {
     parameters,
     ready
   } = useFetchDatasourceInfo({
     isRegularCardNode,
-    url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+    url: (_existingNode2 = existingNode) === null || _existingNode2 === void 0 ? void 0 : _existingNode2.attrs.url,
     cardContext,
-    nodeParameters: existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 ? void 0 : (_existingNode$attrs2$ = _existingNode$attrs2.datasource) === null || _existingNode$attrs2$ === void 0 ? void 0 : _existingNode$attrs2$.parameters
+    nodeParameters: (_existingNode3 = existingNode) === null || _existingNode3 === void 0 ? void 0 : (_existingNode3$attrs = _existingNode3.attrs) === null || _existingNode3$attrs === void 0 ? void 0 : (_existingNode3$attrs$ = _existingNode3$attrs.datasource) === null || _existingNode3$attrs$ === void 0 ? void 0 : _existingNode3$attrs$.parameters
   });
   const onClose = useCallback(() => {
     dispatch(hideDatasourceModal(view.state.tr));
@@ -48,14 +64,14 @@ export const DatasourceModal = ({
     }
   }, [existingNode, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs3, _tableView$properties;
+    var _existingNode4, _existingNode4$attrs, _tableView$properties, _existingNode5;
     if (!ready) {
       return null;
     }
     const {
       id: datasourceId = JIRA_LIST_OF_LINKS_DATASOURCE_ID,
       views = []
-    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs3 = existingNode.attrs) === null || _existingNode$attrs3 === void 0 ? void 0 : _existingNode$attrs3.datasource) || {};
+    } = ((_existingNode4 = existingNode) === null || _existingNode4 === void 0 ? void 0 : (_existingNode4$attrs = _existingNode4.attrs) === null || _existingNode4$attrs === void 0 ? void 0 : _existingNode4$attrs.datasource) || {};
     const [tableView] = views;
     const visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties = tableView.properties) === null || _tableView$properties === void 0 ? void 0 : _tableView$properties.columns.map(column => column.key);
     return /*#__PURE__*/React.createElement("div", {
@@ -66,18 +82,18 @@ export const DatasourceModal = ({
       ,
       visibleColumnKeys: visibleColumnKeys,
       parameters: parameters,
-      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      url: (_existingNode5 = existingNode) === null || _existingNode5 === void 0 ? void 0 : _existingNode5.attrs.url,
       onCancel: onClose,
       onInsert: onInsert
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs4, _tableView$properties2;
+    var _existingNode6, _existingNode6$attrs, _tableView$properties2;
     const {
       id: datasourceId = ASSETS_LIST_OF_LINKS_DATASOURCE_ID,
       parameters,
       views = []
-    } = (existingNode === null || existingNode === void 0 ? void 0 : (_existingNode$attrs4 = existingNode.attrs) === null || _existingNode$attrs4 === void 0 ? void 0 : _existingNode$attrs4.datasource) || {};
+    } = ((_existingNode6 = existingNode) === null || _existingNode6 === void 0 ? void 0 : (_existingNode6$attrs = _existingNode6.attrs) === null || _existingNode6$attrs === void 0 ? void 0 : _existingNode6$attrs.datasource) || {};
     const [tableView] = views;
     const visibleColumnKeys = tableView === null || tableView === void 0 ? void 0 : (_tableView$properties2 = tableView.properties) === null || _tableView$properties2 === void 0 ? void 0 : _tableView$properties2.columns.map(column => column.key);
     return /*#__PURE__*/React.createElement("div", {

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,6 +1,8 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
+import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
 import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -90,6 +92,12 @@ export class HyperlinkToolbarAppearance extends Component {
       platform: platform,
       editorAnalyticsApi: editorAnalyticsApi,
       cardActions: cardActions
+    }), getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+      intl: intl,
+      url: url,
+      editorState: editorState,
+      editorView: editorView,
+      editorAnalyticsApi: editorAnalyticsApi
     }));
   }
 }

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

@@ -427,7 +427,9 @@ export var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
 // Apply an update made from a datasource ui interaction
 export var updateCardViaDatasource = function updateCardViaDatasource(state, node, newAdf, view, sourceEvent, isDeletingConfig) {
   var tr = state.tr,
-    from = state.selection.from,
+    _state$selection2 = state.selection,
+    from = _state$selection2.from,
+    to = _state$selection2.to,
     schemaNodes = state.schema.nodes;
   if (newAdf.type === 'blockCard') {
     var _node$attrs, _newAdf$attrs;
@@ -451,6 +453,28 @@ export var updateCardViaDatasource = function updateCardViaDatasource(state, nod
       if (isColumnChange || isUrlChange) {
         tr.setNodeMarkup(from, schemaNodes.blockCard, _objectSpread(_objectSpread({}, node.attrs), newAdf.attrs));
       }
+    } else if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && node.type.isText) {
+      // url to datasource
+      var link;
+      state.doc.nodesBetween(from, to, function (node, pos) {
+        // get the actual start position of a link within the node
+        var linkMark = node.marks.find(function (mark) {
+          return mark.type === state.schema.marks.link;
+        });
+        if (linkMark) {
+          link = {
+            url: linkMark.attrs.href,
+            text: node.text,
+            pos: pos
+          };
+          return false;
+        }
+        return true;
+      });
+      if (link) {
+        var newNode = schemaNodes.blockCard.createChecked(newAdf.attrs);
+        tr.replaceWith(link.pos, link.pos + (link.text || link.url).length, [newNode]);
+      }
     } else {
       // inline or blockCard to datasource
       tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);

package/dist/esm/ui/DatasourceAppearanceButton.js

@@ -7,6 +7,7 @@ import { canRenderDatasource } from '@atlaskit/editor-common/utils';
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import TableIcon from '@atlaskit/icon/glyph/table';
 import { buildDatasourceAdf } from '@atlaskit/link-datasource';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
 import { updateCardViaDatasource } from '../pm-plugins/doc';
 import { pluginKey } from '../pm-plugins/plugin-key';
@@ -43,7 +44,24 @@ var DatasourceAppearanceButtonWithCardContext = function DatasourceAppearanceBut
       }]
     }, url);
     var selection = editorState.selection;
-    var existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    var existingNode;
+    if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+      // Check if the selection contains a link mark
+      var $pos = editorState.doc.resolve(selection.from);
+      var isLinkMark = $pos.marks().some(function (mark) {
+        return mark.type === editorState.schema.marks.link;
+      });
+
+      // When selection is a TextNode and a link Mark is present return that node
+      if (selection instanceof NodeSelection) {
+        existingNode = selection.node;
+      } else if (isLinkMark) {
+        var _editorState$doc$node;
+        existingNode = (_editorState$doc$node = editorState.doc.nodeAt(selection.from)) !== null && _editorState$doc$node !== void 0 ? _editorState$doc$node : undefined;
+      }
+    } else {
+      existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+    }
     if (existingNode) {
       updateCardViaDatasource(editorState, existingNode, newAdf, editorView, undefined, true);
     }

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

@@ -5,24 +5,42 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { hideDatasourceModal } from '../../pm-plugins/actions';
 import { insertDatasource, updateCardViaDatasource } from '../../pm-plugins/doc';
 import { useFetchDatasourceInfo } from '../useFetchDatasourceInfo';
 export var DatasourceModal = function DatasourceModal(_ref) {
-  var _existingNode$attrs, _existingNode$attrs2;
+  var _existingNode, _existingNode2, _existingNode3;
   var view = _ref.view,
     modalType = _ref.modalType,
     cardContext = _ref.cardContext;
   var dispatch = view.dispatch,
     state = view.state;
   var selection = state.selection;
-  var existingNode = selection instanceof NodeSelection ? selection.node : undefined;
-  var isRegularCardNode = !!(existingNode && !(existingNode !== null && existingNode !== void 0 && (_existingNode$attrs = existingNode.attrs) !== null && _existingNode$attrs !== void 0 && _existingNode$attrs.datasource));
+  var existingNode;
+  if (getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar')) {
+    // Check if the selection contains a link mark
+    var $pos = state.doc.resolve(selection.from);
+    var isLinkMark = $pos.marks().some(function (mark) {
+      return mark.type === state.schema.marks.link;
+    });
+
+    // When selection is a TextNode and a link Mark is present return that node
+    if (selection instanceof NodeSelection) {
+      existingNode = selection.node;
+    } else if (isLinkMark) {
+      var _state$doc$nodeAt;
+      existingNode = (_state$doc$nodeAt = state.doc.nodeAt(selection.from)) !== null && _state$doc$nodeAt !== void 0 ? _state$doc$nodeAt : undefined;
+    }
+  } else {
+    existingNode = selection instanceof NodeSelection ? selection.node : undefined;
+  }
+  var isRegularCardNode = !!(existingNode && !((_existingNode = existingNode) !== null && _existingNode !== void 0 && (_existingNode = _existingNode.attrs) !== null && _existingNode !== void 0 && _existingNode.datasource));
   var _useFetchDatasourceIn = useFetchDatasourceInfo({
       isRegularCardNode: isRegularCardNode,
-      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      url: (_existingNode2 = existingNode) === null || _existingNode2 === void 0 ? void 0 : _existingNode2.attrs.url,
       cardContext: cardContext,
-      nodeParameters: existingNode === null || existingNode === void 0 || (_existingNode$attrs2 = existingNode.attrs) === null || _existingNode$attrs2 === void 0 || (_existingNode$attrs2 = _existingNode$attrs2.datasource) === null || _existingNode$attrs2 === void 0 ? void 0 : _existingNode$attrs2.parameters
+      nodeParameters: (_existingNode3 = existingNode) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.attrs) === null || _existingNode3 === void 0 || (_existingNode3 = _existingNode3.datasource) === null || _existingNode3 === void 0 ? void 0 : _existingNode3.parameters
     }),
     parameters = _useFetchDatasourceIn.parameters,
     ready = _useFetchDatasourceIn.ready;
@@ -46,11 +64,11 @@ export var DatasourceModal = function DatasourceModal(_ref) {
     }
   }, [existingNode, view]);
   if (modalType === 'jira') {
-    var _existingNode$attrs3, _tableView$properties;
+    var _existingNode4, _tableView$properties, _existingNode5;
     if (!ready) {
       return null;
     }
-    var _ref2 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs3 = existingNode.attrs) === null || _existingNode$attrs3 === void 0 ? void 0 : _existingNode$attrs3.datasource) || {},
+    var _ref2 = ((_existingNode4 = existingNode) === null || _existingNode4 === void 0 || (_existingNode4 = _existingNode4.attrs) === null || _existingNode4 === void 0 ? void 0 : _existingNode4.datasource) || {},
       _ref2$id = _ref2.id,
       datasourceId = _ref2$id === void 0 ? JIRA_LIST_OF_LINKS_DATASOURCE_ID : _ref2$id,
       _ref2$views = _ref2.views,
@@ -69,14 +87,14 @@ export var DatasourceModal = function DatasourceModal(_ref) {
       ,
       visibleColumnKeys: visibleColumnKeys,
       parameters: parameters,
-      url: existingNode === null || existingNode === void 0 ? void 0 : existingNode.attrs.url,
+      url: (_existingNode5 = existingNode) === null || _existingNode5 === void 0 ? void 0 : _existingNode5.attrs.url,
       onCancel: onClose,
       onInsert: onInsert
     }));
   }
   if (modalType === 'assets') {
-    var _existingNode$attrs4, _tableView$properties2;
-    var _ref5 = (existingNode === null || existingNode === void 0 || (_existingNode$attrs4 = existingNode.attrs) === null || _existingNode$attrs4 === void 0 ? void 0 : _existingNode$attrs4.datasource) || {},
+    var _existingNode6, _tableView$properties2;
+    var _ref5 = ((_existingNode6 = existingNode) === null || _existingNode6 === void 0 || (_existingNode6 = _existingNode6.attrs) === null || _existingNode6 === void 0 ? void 0 : _existingNode6.datasource) || {},
       _ref5$id = _ref5.id,
       _datasourceId = _ref5$id === void 0 ? ASSETS_LIST_OF_LINKS_DATASOURCE_ID : _ref5$id,
       _parameters = _ref5.parameters,

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -10,7 +10,9 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
 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; } }
 import React, { Component } from 'react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Flex } from '@atlaskit/primitives';
+import { DatasourceAppearanceButton } from './DatasourceAppearanceButton';
 import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -165,6 +167,12 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
+      }), getBooleanFF('platform.linking-platform.enable-datasource-appearance-toolbar') && /*#__PURE__*/React.createElement(DatasourceAppearanceButton, {
+        intl: intl,
+        url: url,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
       }));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -53,10 +53,10 @@
     "@atlaskit/linking-common": "^5.3.0",
     "@atlaskit/linking-types": "^8.6.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^3.2.0",
+    "@atlaskit/primitives": "^4.0.0",
     "@atlaskit/smart-card": "^26.48.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.38.0",
+    "@atlaskit/tokens": "^1.39.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",