@atlaskit/editor-plugin-card 0.11.1 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-card
 
+## 0.12.0
+
+### Minor Changes
+
+- [#42821](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42821) [`9ae7cc56578`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9ae7cc56578) - [ux] Adds datasource edit button to blue links that can resolve into datasources
+
 ## 0.11.1
 
 ### Patch Changes

package/dist/cjs/ui/EditDatasourceButton.js

@@ -8,6 +8,7 @@ var _react = require("@emotion/react");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
 var _utils = require("@atlaskit/editor-common/utils");
+var _primitives = require("@atlaskit/primitives");
 var _actions = require("../pm-plugins/actions");
 var _CardContextProvider = require("./CardContextProvider");
 var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
@@ -16,9 +17,6 @@ var _useFetchDatasourceInfo = require("./useFetchDatasourceInfo");
 var buttonStyles = (0, _react.css)({
   pointerEvents: 'auto'
 });
-var buttonWrapperStyles = (0, _react.css)({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -51,9 +49,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return (0, _react.jsx)("div", {
-    css: buttonWrapperStyles
-  }, (0, _react.jsx)(_ui.FloatingToolbarButton, {
+  return (0, _react.jsx)(_primitives.Flex, null, (0, _react.jsx)(_ui.FloatingToolbarButton, {
     css: buttonStyles,
     title: intl.formatMessage(_messages.cardMessages.datasourceTitle),
     icon: (0, _react.jsx)(_ui.SmallerEditIcon, null),

package/dist/cjs/ui/HyperlinkToolbarAppearance.js

@@ -16,6 +16,8 @@ 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 _primitives = require("@atlaskit/primitives");
+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); }
 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; }
@@ -155,7 +157,13 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Flex, null, /*#__PURE__*/_react.default.createElement(_EditDatasourceButton.EditDatasourceButton, {
+        url: url,
+        intl: intl,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
+      }), /*#__PURE__*/_react.default.createElement(_LinkToolbarAppearance.LinkToolbarAppearance, {
         key: "link-appearance",
         url: url,
         intl: intl,
@@ -166,7 +174,7 @@ var HyperlinkToolbarAppearance = exports.HyperlinkToolbarAppearance = /*#__PURE_
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
-      });
+      }));
     }
   }]);
   return HyperlinkToolbarAppearance;

package/dist/cjs/ui/useFetchDatasourceInfo.js

@@ -11,6 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 /** @jsx jsx */
 
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 var useFetchDatasourceInfo = exports.useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,
     url = _ref.url,

package/dist/es2019/ui/EditDatasourceButton.js

@@ -3,15 +3,13 @@ import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
+import { Flex } from '@atlaskit/primitives';
 import { showDatasourceModal } from '../pm-plugins/actions';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 const buttonStyles = css({
   pointerEvents: 'auto'
 });
-const buttonWrapperStyles = css({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -46,9 +44,7 @@ const EditDatasourceButtonWithCardContext = ({
       editorView.focus();
     }
   };
-  return jsx("div", {
-    css: buttonWrapperStyles
-  }, jsx(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
     icon: jsx(SmallerEditIcon, null),

package/dist/es2019/ui/HyperlinkToolbarAppearance.js

@@ -1,5 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
+import { Flex } from '@atlaskit/primitives';
+import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class HyperlinkToolbarAppearance extends Component {
@@ -70,7 +72,13 @@ export class HyperlinkToolbarAppearance extends Component {
     if (!supportedUrlsMap.get(url)) {
       return null;
     }
-    return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+    return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(EditDatasourceButton, {
+      url: url,
+      intl: intl,
+      editorState: editorState,
+      editorView: editorView,
+      editorAnalyticsApi: editorAnalyticsApi
+    }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
       key: "link-appearance",
       url: url,
       intl: intl,
@@ -81,6 +89,6 @@ export class HyperlinkToolbarAppearance extends Component {
       platform: platform,
       editorAnalyticsApi: editorAnalyticsApi,
       cardActions: cardActions
-    });
+    }));
   }
 }

package/dist/es2019/ui/useFetchDatasourceInfo.js

@@ -1,5 +1,10 @@
 /** @jsx jsx */
 import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 export const useFetchDatasourceInfo = ({
   isRegularCardNode,
   url,

package/dist/esm/ui/EditDatasourceButton.js

@@ -3,15 +3,13 @@ import { css, jsx } from '@emotion/react';
 import { cardMessages as messages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarButton as Button, FloatingToolbarSeparator as Separator, SmallerEditIcon } from '@atlaskit/editor-common/ui';
 import { canRenderDatasource, getDatasourceType } from '@atlaskit/editor-common/utils';
+import { Flex } from '@atlaskit/primitives';
 import { showDatasourceModal } from '../pm-plugins/actions';
 import { CardContextProvider } from './CardContextProvider';
 import { useFetchDatasourceInfo } from './useFetchDatasourceInfo';
 var buttonStyles = css({
   pointerEvents: 'auto'
 });
-var buttonWrapperStyles = css({
-  display: 'flex'
-});
 
 // Edit button in toolbar to open datasource modal. This button is shown for inline, block, and embed cards
 // if they can resolve into a datasource.
@@ -44,9 +42,7 @@ var EditDatasourceButtonWithCardContext = function EditDatasourceButtonWithCardC
       editorView.focus();
     }
   };
-  return jsx("div", {
-    css: buttonWrapperStyles
-  }, jsx(Button, {
+  return jsx(Flex, null, jsx(Button, {
     css: buttonStyles,
     title: intl.formatMessage(messages.datasourceTitle),
     icon: jsx(SmallerEditIcon, null),

package/dist/esm/ui/HyperlinkToolbarAppearance.js

@@ -10,6 +10,8 @@ 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 { Flex } from '@atlaskit/primitives';
+import { EditDatasourceButton } from './EditDatasourceButton';
 import { LinkToolbarAppearance } from './LinkToolbarAppearance';
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
@@ -145,7 +147,13 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
       if (!supportedUrlsMap.get(url)) {
         return null;
       }
-      return /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
+      return /*#__PURE__*/React.createElement(Flex, null, /*#__PURE__*/React.createElement(EditDatasourceButton, {
+        url: url,
+        intl: intl,
+        editorState: editorState,
+        editorView: editorView,
+        editorAnalyticsApi: editorAnalyticsApi
+      }), /*#__PURE__*/React.createElement(LinkToolbarAppearance, {
         key: "link-appearance",
         url: url,
         intl: intl,
@@ -156,7 +164,7 @@ export var HyperlinkToolbarAppearance = /*#__PURE__*/function (_Component) {
         platform: platform,
         editorAnalyticsApi: editorAnalyticsApi,
         cardActions: cardActions
-      });
+      }));
     }
   }]);
   return HyperlinkToolbarAppearance;

package/dist/esm/ui/useFetchDatasourceInfo.js

@@ -3,6 +3,11 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 /** @jsx jsx */
 import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+
 export var useFetchDatasourceInfo = function useFetchDatasourceInfo(_ref) {
   var isRegularCardNode = _ref.isRegularCardNode,
     url = _ref.url,

package/dist/types/ui/HyperlinkToolbarAppearance.d.ts

@@ -1,12 +1,11 @@
 import { Component } from 'react';
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardPluginActions } from '@atlaskit/editor-common/card';
-import { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { CardPlatform } from '@atlaskit/smart-card';
+import type { CardOptions, CardPluginActions } from '@atlaskit/editor-common/card';
+import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardPlatform } from '@atlaskit/smart-card';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;

package/dist/types-ts4.5/ui/HyperlinkToolbarAppearance.d.ts

@@ -1,12 +1,11 @@
 import { Component } from 'react';
-import { IntlShape } from 'react-intl-next';
+import type { IntlShape } from 'react-intl-next';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import { CardOptions } from '@atlaskit/editor-common/card';
-import type { CardPluginActions } from '@atlaskit/editor-common/card';
-import { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
-import { EditorState } from '@atlaskit/editor-prosemirror/state';
-import { EditorView } from '@atlaskit/editor-prosemirror/view';
-import { CardPlatform } from '@atlaskit/smart-card';
+import type { CardOptions, CardPluginActions } from '@atlaskit/editor-common/card';
+import type { CardProvider, ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { CardPlatform } from '@atlaskit/smart-card';
 export interface HyperlinkToolbarAppearanceProps {
     intl: IntlShape;
     editorState: EditorState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.11.1",
+  "version": "0.12.0",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -50,6 +50,7 @@
     "@atlaskit/link-datasource": "^1.15.0",
     "@atlaskit/linking-common": "^4.17.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/primitives": "^1.9.0",
     "@atlaskit/smart-card": "^26.42.0",
     "@atlaskit/theme": "^12.6.0",
     "@atlaskit/tokens": "^1.28.0",