@atlaskit/editor-core 185.5.7 → 185.6.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-core
 
+## 185.6.1
+
+### Patch Changes
+
+- [`a1a0ac82bce`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1a0ac82bce) - ED-18861 Update editor wrapper div when assistiveLabel prop change.
+- [`8d460228bf3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d460228bf3) - NONE: fix collabparticipant import
+- Updated dependencies
+
+## 185.6.0
+
+### Minor Changes
+
+- [`a1b70608039`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a1b70608039) - [ux] Adds editor toolbar to link datasource component
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 185.5.7
 
 ### Patch Changes

package/dist/cjs/create-editor/ReactEditorViewInternal.js

@@ -486,14 +486,24 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "editor", /*#__PURE__*/_react.default.createElement("div", {
-      className: getUAPrefix(),
-      key: "ProseMirror",
-      ref: _this.handleEditorViewRef,
-      "aria-label": _this.props.editorProps.assistiveLabel ? _this.props.editorProps.assistiveLabel : _this.props.intl.formatMessage(_messages.editorMessages.editorAssistiveLabel),
-      role: "textbox",
-      id: EDIT_AREA_ID
-    }));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createEditor", function (assistiveLabel) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: getUAPrefix(),
+        key: "ProseMirror",
+        ref: _this.handleEditorViewRef,
+        "aria-label": assistiveLabel || _this.props.intl.formatMessage(_messages.editorMessages.editorAssistiveLabel)
+        // setting aria-multiline to true when not mobile appearance.
+        //  because somehow mobile tests are failing when it set.
+        //  don't know why that is happening.
+        // Created https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-1675
+        //  to investigate further.
+        ,
+        "aria-multiline": _this.props.editorProps.appearance !== 'mobile' ? true : false,
+        role: "textbox",
+        id: EDIT_AREA_ID
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "editor", _this.createEditor(_this.props.editorProps.assistiveLabel));
     _this.pluginInjectionAPI = new _preset.EditorPluginInjectionAPI({
       getEditorState: _this.getEditorState
     });
@@ -622,6 +632,9 @@ var ReactEditorView = /*#__PURE__*/function (_React$Component) {
       if (!this.transactionTracking.enabled) {
         this.pluginPerformanceObserver.disconnect();
       }
+      if (nextProps.editorProps.assistiveLabel !== this.props.editorProps.assistiveLabel) {
+        this.editor = this.createEditor(nextProps.editorProps.assistiveLabel);
+      }
     }
   }, {
     key: "reconfigureState",

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.showLinkToolbar = exports.setProvider = exports.setDatasourceTableRef = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.registerSmartCardEventsNext = exports.registerSmartCardEvents = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.cardAction = void 0;
+exports.showLinkToolbar = exports.showDatasourceModal = exports.setProvider = exports.setDatasourceTableRef = exports.setCardLayoutAndDatasourceTableRef = exports.setCardLayout = exports.resolveCard = exports.registerSmartCardEventsNext = exports.registerSmartCardEvents = exports.registerCard = exports.queueCards = exports.hideLinkToolbar = exports.hideDatasourceModal = exports.cardAction = void 0;
 var _pluginKey = require("./plugin-key");
 var cardAction = function cardAction(tr, action) {
   return tr.setMeta(_pluginKey.pluginKey, action);
@@ -104,4 +104,16 @@ var hideLinkToolbar = function hideLinkToolbar(tr) {
     type: 'HIDE_LINK_TOOLBAR'
   });
 };
-exports.hideLinkToolbar = hideLinkToolbar;
+exports.hideLinkToolbar = hideLinkToolbar;
+var showDatasourceModal = function showDatasourceModal(tr) {
+  return cardAction(tr, {
+    type: 'SHOW_DATASOURCE_MODAL'
+  });
+};
+exports.showDatasourceModal = showDatasourceModal;
+var hideDatasourceModal = function hideDatasourceModal(tr) {
+  return cardAction(tr, {
+    type: 'HIDE_DATASOURCE_MODAL'
+  });
+};
+exports.hideDatasourceModal = hideDatasourceModal;

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

@@ -4,9 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.updateCard = exports.setSelectedCardAppearance = exports.replaceQueuedUrlWithCard = exports.queueCardsFromChangedTr = exports.queueCardFromChangedTr = 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.handleFallbackWithAnalytics = 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"));
 var _prosemirrorState = require("prosemirror-state");
 var _prosemirrorHistory = require("prosemirror-history");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -424,4 +425,35 @@ var getLinkNodeType = function getLinkNodeType(appearance, linkNodes) {
     case 'embed':
       return linkNodes.embedCard;
   }
-};
+};
+
+// Apply an update to a datasource (aka blockCard) node
+var updateExistingDatasource = function updateExistingDatasource(state, node, newAdf, view) {
+  var tr = state.tr,
+    from = state.selection.from,
+    schemaNodes = state.schema.nodes;
+
+  // datasource to datasource
+  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
+    var _ref, _ref2, _newViews$, _newViews$$properties, _oldViews$, _oldViews$$properties, _newAdf$attrs, _node$attrs;
+    var newViews = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
+    var oldViews = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
+    var newColumnKeys = (_newViews$ = newViews[0]) === null || _newViews$ === void 0 ? void 0 : (_newViews$$properties = _newViews$.properties) === null || _newViews$$properties === void 0 ? void 0 : _newViews$$properties.columns.map(function (column) {
+      return column.key;
+    });
+    var oldColumnKeys = (_oldViews$ = oldViews[0]) === null || _oldViews$ === void 0 ? void 0 : (_oldViews$$properties = _oldViews$.properties) === null || _oldViews$$properties === void 0 ? void 0 : _oldViews$$properties.columns.map(function (column) {
+      return column.key;
+    });
+    var isColumnChange = !(0, _isEqual.default)(oldColumnKeys, newColumnKeys);
+    var isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
+    if (isColumnChange || isUrlChange) {
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
+    }
+  } else if (newAdf.type === 'inlineCard') {
+    // datasource to inline
+    tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
+  }
+  (0, _actions.hideDatasourceModal)(tr);
+  view.dispatch(tr.scrollIntoView());
+};
+exports.updateExistingDatasource = updateExistingDatasource;

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

@@ -50,6 +50,7 @@ var createPlugin = function createPlugin(options, pluginInjectionApi) {
             smartLinkEventsNext: undefined,
             createAnalyticsEvent: createAnalyticsEvent,
             editorAppearance: editorAppearance,
+            showDatasourceModal: false,
             datasourceTableRef: undefined,
             layout: undefined
           };

package/dist/cjs/plugins/card/pm-plugins/reducers.js

@@ -67,6 +67,11 @@ var setLinkToolbar = function setLinkToolbar(state, action) {
     showLinkingToolbar: action.type === 'SHOW_LINK_TOOLBAR'
   });
 };
+var setDatasourceModal = function setDatasourceModal(state, action) {
+  return _objectSpread(_objectSpread({}, state), {}, {
+    showDatasourceModal: action.type === 'SHOW_DATASOURCE_MODAL'
+  });
+};
 var _default = function _default(state, action) {
   switch (action.type) {
     case 'QUEUE':
@@ -90,6 +95,9 @@ var _default = function _default(state, action) {
     case 'SHOW_LINK_TOOLBAR':
     case 'HIDE_LINK_TOOLBAR':
       return setLinkToolbar(state, action);
+    case 'SHOW_DATASOURCE_MODAL':
+    case 'HIDE_DATASOURCE_MODAL':
+      return setDatasourceModal(state, action);
   }
 };
 exports.default = _default;

package/dist/cjs/plugins/card/styles.js

@@ -10,8 +10,9 @@ var _react = require("@emotion/react");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _styles = require("@atlaskit/editor-common/styles");
+var _datasource = require("./nodeviews/datasource");
 var _templateObject;
 var FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 exports.FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = FLOATING_TOOLBAR_LINKPICKER_CLASSNAME;
-var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
+var smartCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .", " {\n    max-width: calc(100% - 20px);\n    vertical-align: top;\n    word-break: break-all;\n\n    .card {\n      padding-left: 2px;\n      padding-right: 2px;\n      padding-top: 0.5em;\n      padding-bottom: 0.5em;\n      margin-bottom: -0.5em;\n\n      .", " > a:focus {\n        ", "\n      }\n    }\n\n    &.", "\n      .", "\n      > a {\n      ", "\n    }\n    .", " > a {\n      /* EDM-1717: box-shadow Safari fix start */\n      z-index: 1;\n      position: relative;\n      /* EDM-1717: box-shadow Safari fix end */\n    }\n\n    &.danger {\n      .", " > a {\n        box-shadow: 0 0 0 1px\n          ", ";\n        /* EDM-1717: box-shadow Safari fix start */\n        z-index: 2;\n        /* EDM-1717: box-shadow Safari fix end */\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &:hover {\n        background-color: ", ";\n      }\n    }\n\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.danger {\n      .", " > div {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n      }\n    }\n  }\n\n  .", ".", " {\n    max-width: 100%;\n    display: flex;\n    justify-content: center;\n\n    .", " {\n      cursor: pointer;\n      background-color: ", ";\n      border-radius: ", ";\n      border: 1px solid ", ";\n    }\n\n    &.", " {\n      .", " {\n        ", "\n      }\n    }\n\n    &.danger {\n      .", " {\n        box-shadow: 0 0 0 1px\n          ", ";\n      }\n    }\n  }\n\n  .", " {\n    .", " > div {\n      cursor: pointer;\n      &::after {\n        transition: box-shadow 0s;\n      }\n    }\n    &.", "\n      .", "\n      > div {\n      ", "\n    }\n\n    &.", "\n      .", "\n      > div::after {\n      ", "\n    }\n\n    &.danger {\n      .media-card-frame::after {\n        box-shadow: 0 0 0 1px\n          ", " !important;\n        background: ", " !important;\n      }\n      .richMedia-resize-handle-right::after,\n      .richMedia-resize-handle-left::after {\n        background: ", ";\n      }\n    }\n  }\n\n  .", " {\n    padding: 0;\n  }\n"])), _styles.SmartCardSharedCssClassName.INLINE_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.DATASOURCE_CONTAINER, _styles.SmartCardSharedCssClassName.BLOCK_CARD_CONTAINER, _datasource.DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-background-neutral-subtle, ".concat(_colors.N0, ")"), "var(--ds-border-radius-100, ".concat(_editorSharedStyles.akEditorRuleBorderRadius, ")"), "var(--ds-border, ".concat(_colors.N40, ")"), _editorSharedStyles.akEditorSelectedNodeClassName, _datasource.DATASOURCE_INNER_CONTAINER_CLASSNAME, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _datasource.DATASOURCE_INNER_CONTAINER_CLASSNAME, "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), _styles.SmartCardSharedCssClassName.EMBED_CARD_CONTAINER, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), _editorSharedStyles.akEditorSelectedNodeClassName, _styles.SmartCardSharedCssClassName.LOADER_WRAPPER, (0, _editorSharedStyles.getSelectionStyles)([_editorSharedStyles.SelectionStyle.BoxShadow]), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), "var(--ds-background-danger, ".concat(_editorSharedStyles.akEditorDeleteBackground, ")"), "var(--ds-border-danger, ".concat(_editorSharedStyles.akEditorDeleteBorder, ")"), FLOATING_TOOLBAR_LINKPICKER_CLASSNAME);
 exports.smartCardStyles = smartCardStyles;

package/dist/cjs/plugins/card/toolbar.js

@@ -27,6 +27,7 @@ var _LinkToolbarAppearance = require("./ui/LinkToolbarAppearance");
 var _messages2 = require("./messages");
 var _styles2 = require("./styles");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _SmallerEditIcon = require("./ui/SmallerEditIcon");
 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); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 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; }
@@ -174,7 +175,7 @@ var withToolbarMetadata = function withToolbarMetadata(command) {
 };
 var generateToolbarItems = function generateToolbarItems(state, featureFlags, intl, providerFactory, cardOptions, platform, linkPicker, pluginInjectionApi) {
   return function (node) {
-    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4, _pluginInjectionApi$d5;
+    var _pluginInjectionApi$d, _pluginInjectionApi$d2, _pluginInjectionApi$d3, _pluginInjectionApi$d4, _pluginInjectionApi$d5, _node$attrs;
     var _titleUrlPairFromNode2 = (0, _utils.titleUrlPairFromNode)(node),
       url = _titleUrlPairFromNode2.url;
     var _ref = (_pluginInjectionApi$d = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d2 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d2 === void 0 ? void 0 : _pluginInjectionApi$d2.analytics) !== null && _pluginInjectionApi$d !== void 0 ? _pluginInjectionApi$d : {},
@@ -194,6 +195,7 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
     var currentAppearance = (0, _utils.appearanceForNodeType)(node.type);
     var _ref2 = (_pluginInjectionApi$d3 = pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$d4 = pluginInjectionApi.dependencies) === null || _pluginInjectionApi$d4 === void 0 ? void 0 : (_pluginInjectionApi$d5 = _pluginInjectionApi$d4.decorations) === null || _pluginInjectionApi$d5 === void 0 ? void 0 : _pluginInjectionApi$d5.actions) !== null && _pluginInjectionApi$d3 !== void 0 ? _pluginInjectionApi$d3 : {},
       hoverDecoration = _ref2.hoverDecoration;
+    var isDatasource = currentAppearance === 'block' && (node === null || node === void 0 ? void 0 : (_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.datasource);
 
     /* mobile builds toolbar natively using toolbarItems */
     if (pluginState.showLinkingToolbar && platform !== 'mobile') {
@@ -204,6 +206,15 @@ var generateToolbarItems = function generateToolbarItems(state, featureFlags, in
         featureFlags: featureFlags,
         pluginInjectionApi: pluginInjectionApi
       })];
+    } else if (pluginState.showDatasourceModal) {
+      return [(0, _EditLinkToolbar.openDatasourceModal)({
+        state: state,
+        node: node,
+        editorAnalyticsApi: editorAnalyticsApi
+      })];
+      // not showing toolbar in mobile for now since not sure what our plans are for it
+    } else if (isDatasource && platform !== 'mobile') {
+      return getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration);
     } else {
       var inlineCard = state.schema.nodes.inlineCard;
       var toolbarItems = [{
@@ -313,4 +324,45 @@ var getSettingsButtonGroup = function getSettingsButtonGroup(state, featureFlags
   }, {
     type: 'separator'
   }] : [];
+};
+var getDatasourceButtonGroup = function getDatasourceButtonGroup(state, metadata, intl, editorAnalyticsApi, node, hoverDecoration) {
+  var _node$attrs2;
+  var toolbarItems = [{
+    id: 'editor.edit.datasource',
+    type: 'button',
+    icon: _SmallerEditIcon.SmallerEditIcon,
+    metadata: metadata,
+    className: 'datasource-edit',
+    title: intl.formatMessage(_messages.linkToolbarMessages.editDatasource),
+    onClick: (0, _EditLinkToolbar.editDatasource)(editorAnalyticsApi)
+  }];
+  if (node !== null && node !== void 0 && (_node$attrs2 = node.attrs) !== null && _node$attrs2 !== void 0 && _node$attrs2.url) {
+    toolbarItems.push({
+      type: 'separator'
+    }, {
+      id: 'editor.link.openLink',
+      type: 'button',
+      icon: _shortcut.default,
+      metadata: metadata,
+      className: 'hyperlink-open-link',
+      title: intl.formatMessage(_messages.linkMessages.openLink),
+      onClick: visitCardLink(editorAnalyticsApi)
+    });
+  }
+  toolbarItems.push({
+    type: 'separator'
+  }, {
+    id: 'editor.link.delete',
+    focusEditoronEnter: true,
+    type: 'button',
+    appearance: 'danger',
+    icon: _remove.default,
+    onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+    onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+    onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, true),
+    onBlur: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(node.type, false),
+    title: intl.formatMessage(_messages.default.remove),
+    onClick: withToolbarMetadata(removeCard(editorAnalyticsApi))
+  });
+  return toolbarItems;
 };

package/dist/cjs/plugins/card/ui/DatasourceModal.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DatasourceModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _linkDatasource = require("@atlaskit/link-datasource");
+var _actions = require("../pm-plugins/actions");
+var _doc = require("../pm-plugins/doc");
+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); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var DatasourceModal = function DatasourceModal(_ref) {
+  var state = _ref.state,
+    view = _ref.view,
+    node = _ref.node;
+  var isJiraDatasource = node.attrs.datasource.parameters.jql;
+  var onClose = (0, _react.useCallback)(function () {
+    view.dispatch((0, _actions.hideDatasourceModal)(view.state.tr));
+  }, [view]);
+  var onInsert = (0, _react.useCallback)(function (newAdf) {
+    (0, _doc.updateExistingDatasource)(state, node, newAdf, view);
+  }, [state, node, view]);
+  if (isJiraDatasource) {
+    var _node$attrs$datasourc, _node$attrs$datasourc2;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      "data-testId": "jira-config-modal"
+    }, /*#__PURE__*/_react.default.createElement(_linkDatasource.JiraIssuesConfigModal, {
+      datasourceId: node.attrs.datasource.id,
+      visibleColumnKeys: (_node$attrs$datasourc = node.attrs.datasource.views[0]) === null || _node$attrs$datasourc === void 0 ? void 0 : (_node$attrs$datasourc2 = _node$attrs$datasourc.properties) === null || _node$attrs$datasourc2 === void 0 ? void 0 : _node$attrs$datasourc2.columns.map(function (column) {
+        return column.key;
+      }),
+      parameters: node.attrs.datasource.parameters,
+      onCancel: onClose,
+      onInsert: onInsert
+    }));
+  }
+  return null; // null for now until we have modal component that handles other datasources
+};
+exports.DatasourceModal = DatasourceModal;

package/dist/cjs/plugins/card/ui/EditLinkToolbar.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.editLinkToolbarConfig = exports.editLink = exports.buildEditLinkToolbar = exports.EditLinkToolbar = void 0;
+exports.openDatasourceModal = exports.editLinkToolbarConfig = exports.editLink = exports.editDatasource = exports.buildEditLinkToolbar = exports.EditLinkToolbar = 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"));
@@ -22,6 +22,7 @@ var _doc = require("../pm-plugins/doc");
 var _utils = require("../utils");
 var _prosemirrorState = require("prosemirror-state");
 var _messages = require("@atlaskit/editor-common/messages");
+var _DatasourceModal = require("./DatasourceModal");
 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; } }
 var HyperLinkToolbarWithListeners = (0, _ui.withOuterListeners)(_HyperlinkAddToolbar.default);
@@ -171,4 +172,46 @@ var editLinkToolbarConfig = function editLinkToolbarConfig(showLinkingToolbar, l
     forcePlacement: true
   } : {};
 };
-exports.editLinkToolbarConfig = editLinkToolbarConfig;
+exports.editLinkToolbarConfig = editLinkToolbarConfig;
+var editDatasource = function editDatasource(editorAnalyticsApi) {
+  return function (state, dispatch) {
+    if (dispatch) {
+      var tr = state.tr;
+      (0, _actions.showDatasourceModal)(tr);
+      // editorAnalyticsApi?.attachAnalyticsEvent(
+      //   buildEditLinkPayload(
+      //     type as
+      //       | ACTION_SUBJECT_ID.CARD_INLINE
+      //       | ACTION_SUBJECT_ID.CARD_BLOCK
+      //       | ACTION_SUBJECT_ID.EMBEDS,
+      //   ),
+      // )(tr);
+      dispatch(tr);
+      return true;
+    }
+    return false;
+  };
+};
+exports.editDatasource = editDatasource;
+var openDatasourceModal = function openDatasourceModal(_ref2) {
+  var state = _ref2.state,
+    node = _ref2.node,
+    editorAnalyticsApi = _ref2.editorAnalyticsApi;
+  return {
+    type: 'custom',
+    disableArrowNavigation: true,
+    fallback: [],
+    render: function render(view) {
+      if (!view) {
+        return null;
+      }
+      return /*#__PURE__*/_react.default.createElement(_DatasourceModal.DatasourceModal, {
+        state: state,
+        view: view,
+        node: node,
+        editorAnalyticsApi: editorAnalyticsApi
+      });
+    }
+  };
+};
+exports.openDatasourceModal = openDatasourceModal;

package/dist/cjs/plugins/card/ui/SmallerEditIcon.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SmallerEditIcon = void 0;
+var _react = require("@emotion/react");
+var _edit = _interopRequireDefault(require("@atlaskit/icon/glyph/edit"));
+var _styled = require("./styled");
+/** @jsx jsx */
+
+var SmallerEditIcon = function SmallerEditIcon() {
+  return (0, _react.jsx)("div", {
+    css: _styled.editIconStyles
+  }, (0, _react.jsx)(_edit.default, {
+    label: "edit"
+  }));
+};
+exports.SmallerEditIcon = SmallerEditIcon;

package/dist/cjs/plugins/card/ui/styled.js

@@ -4,11 +4,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.embedSpacingStyles = exports.embedCardStyles = void 0;
+exports.embedSpacingStyles = exports.embedCardStyles = exports.editIconStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
-var _templateObject, _templateObject2;
+var _templateObject, _templateObject2, _templateObject3;
 var embedCardStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  .ProseMirror {\n    .embedCardView-content-wrap[layout^='wrap-'] {\n      max-width: 100%;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-left'] {\n      float: left;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right'] {\n      float: right;\n    }\n\n    .embedCardView-content-wrap[layout='wrap-right']\n      + .embedCardView-content-wrap[layout='wrap-left'] {\n      clear: both;\n    }\n  }\n"])));
 exports.embedCardStyles = embedCardStyles;
 var embedSpacingStyles = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0 10px;\n"])));
-exports.embedSpacingStyles = embedSpacingStyles;
+exports.embedSpacingStyles = embedSpacingStyles;
+var editIconStyles = (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  width: 20px;\n"])));
+exports.editIconStyles = editIconStyles;

package/dist/cjs/version-wrapper.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.version = exports.nextMajorVersion = exports.name = void 0;
 var name = "@atlaskit/editor-core";
 exports.name = name;
-var version = "185.5.7";
+var version = "185.6.1";
 exports.version = version;
 var nextMajorVersion = function nextMajorVersion() {
   return [Number(version.split('.')[0]) + 1, 0, 0].join('.');

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/editor-core",
-	"version": "185.5.7",
+	"version": "185.6.1",
 	"sideEffects": false
 }

package/dist/es2019/create-editor/ReactEditorViewInternal.js

@@ -486,14 +486,24 @@ export class ReactEditorView extends React.Component {
         });
       }
     });
-    _defineProperty(this, "editor", /*#__PURE__*/React.createElement("div", {
-      className: getUAPrefix(),
-      key: "ProseMirror",
-      ref: this.handleEditorViewRef,
-      "aria-label": this.props.editorProps.assistiveLabel ? this.props.editorProps.assistiveLabel : this.props.intl.formatMessage(editorMessages.editorAssistiveLabel),
-      role: "textbox",
-      id: EDIT_AREA_ID
-    }));
+    _defineProperty(this, "createEditor", assistiveLabel => {
+      return /*#__PURE__*/React.createElement("div", {
+        className: getUAPrefix(),
+        key: "ProseMirror",
+        ref: this.handleEditorViewRef,
+        "aria-label": assistiveLabel || this.props.intl.formatMessage(editorMessages.editorAssistiveLabel)
+        // setting aria-multiline to true when not mobile appearance.
+        //  because somehow mobile tests are failing when it set.
+        //  don't know why that is happening.
+        // Created https://product-fabric.atlassian.net/jira/servicedesk/projects/DTR/queues/issue/DTR-1675
+        //  to investigate further.
+        ,
+        "aria-multiline": this.props.editorProps.appearance !== 'mobile' ? true : false,
+        role: "textbox",
+        id: EDIT_AREA_ID
+      });
+    });
+    _defineProperty(this, "editor", this.createEditor(this.props.editorProps.assistiveLabel));
     this.pluginInjectionAPI = new EditorPluginInjectionAPI({
       getEditorState: this.getEditorState
     });
@@ -582,6 +592,9 @@ export class ReactEditorView extends React.Component {
     if (!this.transactionTracking.enabled) {
       this.pluginPerformanceObserver.disconnect();
     }
+    if (nextProps.editorProps.assistiveLabel !== this.props.editorProps.assistiveLabel) {
+      this.editor = this.createEditor(nextProps.editorProps.assistiveLabel);
+    }
   }
   reconfigureState(props) {
     if (!this.view) {

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

@@ -47,4 +47,10 @@ export const showLinkToolbar = tr => cardAction(tr, {
 });
 export const hideLinkToolbar = tr => cardAction(tr, {
   type: 'HIDE_LINK_TOOLBAR'
+});
+export const showDatasourceModal = tr => cardAction(tr, {
+  type: 'SHOW_DATASOURCE_MODAL'
+});
+export const hideDatasourceModal = tr => cardAction(tr, {
+  type: 'HIDE_DATASOURCE_MODAL'
 });

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

@@ -1,3 +1,4 @@
+import isEqual from 'lodash/isEqual';
 import { NodeSelection, TextSelection } from 'prosemirror-state';
 import { closeHistory } from 'prosemirror-history';
 import { isSafeUrl } from '@atlaskit/adf-schema';
@@ -6,7 +7,7 @@ import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, INPUT_METHOD, SM
 import { nodesBetweenChanged, processRawValue } from '@atlaskit/editor-common/utils';
 import { isFromCurrentDomain, getLinkCreationAnalyticsEvent } from '@atlaskit/editor-common/utils';
 import { appearanceForNodeType, selectedCardAppearance } from '../utils';
-import { queueCards, resolveCard } from './actions';
+import { queueCards, resolveCard, hideDatasourceModal } from './actions';
 import { pluginKey } from './plugin-key';
 import { shouldReplaceLink } from './shouldReplaceLink';
 
@@ -391,4 +392,36 @@ const getLinkNodeType = (appearance, linkNodes) => {
     case 'embed':
       return linkNodes.embedCard;
   }
+};
+
+// Apply an update to a datasource (aka blockCard) node
+export const updateExistingDatasource = (state, node, newAdf, view) => {
+  const {
+    tr,
+    selection: {
+      from
+    },
+    schema: {
+      nodes: schemaNodes
+    }
+  } = state;
+
+  // datasource to datasource
+  if (newAdf.type === 'blockCard' && newAdf.attrs.datasource && node.attrs.datasource) {
+    var _ref, _ref2, _newViews$, _newViews$$properties, _oldViews$, _oldViews$$properties, _newAdf$attrs, _node$attrs;
+    const newViews = (_ref = newAdf.attrs.datasource.views) !== null && _ref !== void 0 ? _ref : [];
+    const oldViews = (_ref2 = node.attrs.datasource.views) !== null && _ref2 !== void 0 ? _ref2 : [];
+    const newColumnKeys = (_newViews$ = newViews[0]) === null || _newViews$ === void 0 ? void 0 : (_newViews$$properties = _newViews$.properties) === null || _newViews$$properties === void 0 ? void 0 : _newViews$$properties.columns.map(column => column.key);
+    const oldColumnKeys = (_oldViews$ = oldViews[0]) === null || _oldViews$ === void 0 ? void 0 : (_oldViews$$properties = _oldViews$.properties) === null || _oldViews$$properties === void 0 ? void 0 : _oldViews$$properties.columns.map(column => column.key);
+    const isColumnChange = !isEqual(oldColumnKeys, newColumnKeys);
+    const isUrlChange = ((_newAdf$attrs = newAdf.attrs) === null || _newAdf$attrs === void 0 ? void 0 : _newAdf$attrs.url) !== ((_node$attrs = node.attrs) === null || _node$attrs === void 0 ? void 0 : _node$attrs.url);
+    if (isColumnChange || isUrlChange) {
+      tr.setNodeMarkup(from, schemaNodes.blockCard, newAdf.attrs);
+    }
+  } else if (newAdf.type === 'inlineCard') {
+    // datasource to inline
+    tr.setNodeMarkup(from, schemaNodes.inlineCard, newAdf.attrs);
+  }
+  hideDatasourceModal(tr);
+  view.dispatch(tr.scrollIntoView());
 };

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

@@ -40,6 +40,7 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           smartLinkEventsNext: undefined,
           createAnalyticsEvent,
           editorAppearance,
+          showDatasourceModal: false,
           datasourceTableRef: undefined,
           layout: undefined
         };

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

@@ -65,6 +65,12 @@ const setLinkToolbar = (state, action) => {
     showLinkingToolbar: action.type === 'SHOW_LINK_TOOLBAR'
   };
 };
+const setDatasourceModal = (state, action) => {
+  return {
+    ...state,
+    showDatasourceModal: action.type === 'SHOW_DATASOURCE_MODAL'
+  };
+};
 export default ((state, action) => {
   switch (action.type) {
     case 'QUEUE':
@@ -88,5 +94,8 @@ export default ((state, action) => {
     case 'SHOW_LINK_TOOLBAR':
     case 'HIDE_LINK_TOOLBAR':
       return setLinkToolbar(state, action);
+    case 'SHOW_DATASOURCE_MODAL':
+    case 'HIDE_DATASOURCE_MODAL':
+      return setDatasourceModal(state, action);
   }
 });

package/dist/es2019/plugins/card/styles.js

@@ -1,8 +1,9 @@
 import { css } from '@emotion/react';
-import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground } from '@atlaskit/editor-shared-styles';
-import { N20 } from '@atlaskit/theme/colors';
+import { SelectionStyle, getSelectionStyles, akEditorDeleteBorder, akEditorDeleteBackground, akEditorRuleBorderRadius } from '@atlaskit/editor-shared-styles';
+import { N0, N20, N40 } from '@atlaskit/theme/colors';
 import { SmartCardSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { akEditorSelectedNodeClassName } from '@atlaskit/editor-shared-styles';
+import { DATASOURCE_INNER_CONTAINER_CLASSNAME } from './nodeviews/datasource';
 export const FLOATING_TOOLBAR_LINKPICKER_CLASSNAME = 'card-floating-toolbar--link-picker';
 export const smartCardStyles = css`
   .${SmartCardSharedCssClassName.INLINE_CARD_CONTAINER} {
@@ -71,6 +72,26 @@ export const smartCardStyles = css`
     max-width: 100%;
     display: flex;
     justify-content: center;
+
+    .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+      cursor: pointer;
+      background-color: ${`var(--ds-background-neutral-subtle, ${N0})`};
+      border-radius: ${`var(--ds-border-radius-100, ${akEditorRuleBorderRadius})`};
+      border: 1px solid ${`var(--ds-border, ${N40})`};
+    }
+
+    &.${akEditorSelectedNodeClassName} {
+      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+        ${getSelectionStyles([SelectionStyle.BoxShadow])}
+      }
+    }
+
+    &.danger {
+      .${DATASOURCE_INNER_CONTAINER_CLASSNAME} {
+        box-shadow: 0 0 0 1px
+          ${`var(--ds-border-danger, ${akEditorDeleteBorder})`};
+      }
+    }
   }
 
   .${SmartCardSharedCssClassName.EMBED_CARD_CONTAINER} {