@atlaskit/editor-plugin-card 0.10.4 → 0.10.5

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/editor-plugin-card
 
+## 0.10.5
+
+### Patch Changes
+
+- [#42367](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42367) [`4f70009532a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4f70009532a) - [ux] Refactored the inline card to be a functional component behind a FF
+
 ## 0.10.4
 
 ### Patch Changes

package/dist/cjs/nodeviews/inlineCard.js

@@ -17,9 +17,11 @@ var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _rafSchd = _interopRequireDefault(require("raf-schd"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _smartCard = require("@atlaskit/smart-card");
 var _actions = require("../pm-plugins/actions");
 var _genericCard = require("./genericCard");
+var _inlineCardWithAwareness = require("./inlineCardWithAwareness");
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -115,13 +117,15 @@ var InlineCardComponent = exports.InlineCardComponent = /*#__PURE__*/function (_
   contextAdapter: _propTypes.default.object
 });
 var WrappedInlineCard = (0, _genericCard.Card)(InlineCardComponent, _ui.UnsupportedInline);
+var WrappedInlineCardWithAwareness = (0, _genericCard.Card)(_inlineCardWithAwareness.InlineCardWithAwareness, _ui.UnsupportedInline);
 function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
     getPos = props.getPos,
     showServerActions = props.showServerActions;
-  return /*#__PURE__*/_react.default.createElement(WrappedInlineCard, {
+  var WrappedCard = (0, _platformFeatureFlags.getBooleanFF)('platform.linking-platform.smart-card.inline-switcher') ? WrappedInlineCardWithAwareness : WrappedInlineCard;
+  return /*#__PURE__*/_react.default.createElement(WrappedCard, {
     node: node,
     view: view,
     getPos: getPos,

package/dist/cjs/nodeviews/inlineCardWithAwareness.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InlineCardWithAwareness = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _rafSchd = _interopRequireDefault(require("raf-schd"));
+var _ui = require("@atlaskit/editor-common/ui");
+var _smartCard = require("@atlaskit/smart-card");
+var _actions = require("../pm-plugins/actions");
+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 InlineCard = function InlineCard(_ref) {
+  var node = _ref.node,
+    cardContext = _ref.cardContext,
+    showServerActions = _ref.showServerActions,
+    useAlternativePreloader = _ref.useAlternativePreloader,
+    view = _ref.view,
+    getPos = _ref.getPos;
+  var scrollContainer = (0, _react.useMemo)(function () {
+    return (0, _ui.findOverflowScrollParent)(view.dom) || undefined;
+  }, [view.dom]);
+  var _node$attrs = node.attrs,
+    url = _node$attrs.url,
+    data = _node$attrs.data;
+  var onClick = function onClick() {};
+  var onResolve = (0, _react.useCallback)(function (data) {
+    if (!getPos || typeof getPos === 'boolean') {
+      return;
+    }
+    var title = data.title,
+      url = data.url;
+    // don't dispatch immediately since we might be in the middle of
+    // rendering a nodeview
+    (0, _rafSchd.default)(function () {
+      // prosemirror-bump-fix
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      view.dispatch((0, _actions.registerCard)({
+        title: title,
+        url: url,
+        pos: pos
+      })(view.state.tr));
+    })();
+  }, [view, getPos]);
+  var onError = (0, _react.useCallback)(function (data) {
+    var url = data.url,
+      err = data.err;
+    if (err) {
+      throw err;
+    }
+    onResolve({
+      url: url
+    });
+  }, [onResolve]);
+  var card = /*#__PURE__*/_react.default.createElement("span", {
+    className: "card"
+  }, /*#__PURE__*/_react.default.createElement(_smartCard.Card, {
+    key: url,
+    url: url,
+    data: data,
+    appearance: "inline",
+    onClick: onClick,
+    container: scrollContainer,
+    onResolve: onResolve,
+    onError: onError,
+    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+    showServerActions: showServerActions
+  }));
+  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+  return cardContext && cardContext.value ? /*#__PURE__*/_react.default.createElement(cardContext.Provider, {
+    value: cardContext.value
+  }, card) : data ? card : null;
+};
+var InlineCardWithAwareness = exports.InlineCardWithAwareness = /*#__PURE__*/(0, _react.memo)(InlineCard);

package/dist/es2019/nodeviews/inlineCard.js

@@ -3,9 +3,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import { Card } from './genericCard';
+import { InlineCardWithAwareness } from './inlineCardWithAwareness';
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export class InlineCardComponent extends React.PureComponent {
@@ -95,6 +97,7 @@ _defineProperty(InlineCardComponent, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 const WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
+const WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 export function InlineCardNodeView(props) {
   const {
     useAlternativePreloader,
@@ -103,7 +106,8 @@ export function InlineCardNodeView(props) {
     getPos,
     showServerActions
   } = props;
-  return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+  const WrappedCard = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') ? WrappedInlineCardWithAwareness : WrappedInlineCard;
+  return /*#__PURE__*/React.createElement(WrappedCard, {
     node: node,
     view: view,
     getPos: getPos,

package/dist/es2019/nodeviews/inlineCardWithAwareness.js

@@ -0,0 +1,75 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+const InlineCard = ({
+  node,
+  cardContext,
+  showServerActions,
+  useAlternativePreloader,
+  view,
+  getPos
+}) => {
+  const scrollContainer = useMemo(() => findOverflowScrollParent(view.dom) || undefined, [view.dom]);
+  const {
+    url,
+    data
+  } = node.attrs;
+  const onClick = () => {};
+  const onResolve = useCallback(data => {
+    if (!getPos || typeof getPos === 'boolean') {
+      return;
+    }
+    const {
+      title,
+      url
+    } = data;
+    // don't dispatch immediately since we might be in the middle of
+    // rendering a nodeview
+    rafSchedule(() => {
+      // prosemirror-bump-fix
+      const pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      view.dispatch(registerCard({
+        title,
+        url,
+        pos
+      })(view.state.tr));
+    })();
+  }, [view, getPos]);
+  const onError = useCallback(data => {
+    const {
+      url,
+      err
+    } = data;
+    if (err) {
+      throw err;
+    }
+    onResolve({
+      url
+    });
+  }, [onResolve]);
+  const card = /*#__PURE__*/React.createElement("span", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement(SmartCard, {
+    key: url,
+    url: url,
+    data: data,
+    appearance: "inline",
+    onClick: onClick,
+    container: scrollContainer,
+    onResolve: onResolve,
+    onError: onError,
+    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+    showServerActions: showServerActions
+  }));
+  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+    value: cardContext.value
+  }, card) : data ? card : null;
+};
+export const InlineCardWithAwareness = /*#__PURE__*/memo(InlineCard);

package/dist/esm/nodeviews/inlineCard.js

@@ -11,9 +11,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import rafSchedule from 'raf-schd';
 import { findOverflowScrollParent, UnsupportedInline } from '@atlaskit/editor-common/ui';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { Card as SmartCard } from '@atlaskit/smart-card';
 import { registerCard } from '../pm-plugins/actions';
 import { Card } from './genericCard';
+import { InlineCardWithAwareness } from './inlineCardWithAwareness';
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
 export var InlineCardComponent = /*#__PURE__*/function (_React$PureComponent) {
@@ -108,13 +110,15 @@ _defineProperty(InlineCardComponent, "contextTypes", {
   contextAdapter: PropTypes.object
 });
 var WrappedInlineCard = Card(InlineCardComponent, UnsupportedInline);
+var WrappedInlineCardWithAwareness = Card(InlineCardWithAwareness, UnsupportedInline);
 export function InlineCardNodeView(props) {
   var useAlternativePreloader = props.useAlternativePreloader,
     node = props.node,
     view = props.view,
     getPos = props.getPos,
     showServerActions = props.showServerActions;
-  return /*#__PURE__*/React.createElement(WrappedInlineCard, {
+  var WrappedCard = getBooleanFF('platform.linking-platform.smart-card.inline-switcher') ? WrappedInlineCardWithAwareness : WrappedInlineCard;
+  return /*#__PURE__*/React.createElement(WrappedCard, {
     node: node,
     view: view,
     getPos: getPos,

package/dist/esm/nodeviews/inlineCardWithAwareness.js

@@ -0,0 +1,71 @@
+import React, { memo, useCallback, useMemo } from 'react';
+import rafSchedule from 'raf-schd';
+import { findOverflowScrollParent } from '@atlaskit/editor-common/ui';
+import { Card as SmartCard } from '@atlaskit/smart-card';
+import { registerCard } from '../pm-plugins/actions';
+var InlineCard = function InlineCard(_ref) {
+  var node = _ref.node,
+    cardContext = _ref.cardContext,
+    showServerActions = _ref.showServerActions,
+    useAlternativePreloader = _ref.useAlternativePreloader,
+    view = _ref.view,
+    getPos = _ref.getPos;
+  var scrollContainer = useMemo(function () {
+    return findOverflowScrollParent(view.dom) || undefined;
+  }, [view.dom]);
+  var _node$attrs = node.attrs,
+    url = _node$attrs.url,
+    data = _node$attrs.data;
+  var onClick = function onClick() {};
+  var onResolve = useCallback(function (data) {
+    if (!getPos || typeof getPos === 'boolean') {
+      return;
+    }
+    var title = data.title,
+      url = data.url;
+    // don't dispatch immediately since we might be in the middle of
+    // rendering a nodeview
+    rafSchedule(function () {
+      // prosemirror-bump-fix
+      var pos = getPos();
+      if (typeof pos !== 'number') {
+        return;
+      }
+      view.dispatch(registerCard({
+        title: title,
+        url: url,
+        pos: pos
+      })(view.state.tr));
+    })();
+  }, [view, getPos]);
+  var onError = useCallback(function (data) {
+    var url = data.url,
+      err = data.err;
+    if (err) {
+      throw err;
+    }
+    onResolve({
+      url: url
+    });
+  }, [onResolve]);
+  var card = /*#__PURE__*/React.createElement("span", {
+    className: "card"
+  }, /*#__PURE__*/React.createElement(SmartCard, {
+    key: url,
+    url: url,
+    data: data,
+    appearance: "inline",
+    onClick: onClick,
+    container: scrollContainer,
+    onResolve: onResolve,
+    onError: onError,
+    inlinePreloaderStyle: useAlternativePreloader ? 'on-right-without-skeleton' : undefined,
+    showServerActions: showServerActions
+  }));
+  // [WS-2307]: we only render card wrapped into a Provider when the value is ready,
+  // otherwise if we got data, we can render the card directly since it doesn't need the Provider
+  return cardContext && cardContext.value ? /*#__PURE__*/React.createElement(cardContext.Provider, {
+    value: cardContext.value
+  }, card) : data ? card : null;
+};
+export var InlineCardWithAwareness = /*#__PURE__*/memo(InlineCard);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
-import { SmartCardProps } from './genericCard';
+import type { SmartCardProps } from './genericCard';
 export declare class InlineCardComponent extends React.PureComponent<SmartCardProps> {
     private scrollContainer?;
     private onClick;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SmartCardProps } from './genericCard';
+export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, showServerActions, useAlternativePreloader, view, getPos, }: SmartCardProps) => JSX.Element | null>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
-import { SmartCardProps } from './genericCard';
+import type { SmartCardProps } from './genericCard';
 export declare class InlineCardComponent extends React.PureComponent<SmartCardProps> {
     private scrollContainer?;
     private onClick;

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { SmartCardProps } from './genericCard';
+export declare const InlineCardWithAwareness: React.MemoExoticComponent<({ node, cardContext, showServerActions, useAlternativePreloader, view, getPos, }: SmartCardProps) => JSX.Element | null>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.10.4",
+  "version": "0.10.5",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -124,6 +124,9 @@
     "platform.linking-platform.datasource.show-jlol-basic-filters": {
       "type": "boolean",
       "referenceOnly": "true"
+    },
+    "platform.linking-platform.smart-card.inline-switcher": {
+      "type": "boolean"
     }
   }
 }