@atlaskit/editor-plugin-card 0.1.0

package/dist/esm/ui/ResizableEmbedCard.js

@@ -0,0 +1,358 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+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; } }
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import { findParentNodeOfTypeClosestToPos, hasParentNodeOfType } from 'prosemirror-utils';
+import { embedSpacingStyles } from '@atlaskit/editor-common/styles';
+import { calcColumnsFromPx, calcMediaPxWidth, calcPctFromPx, calcPxFromColumns, handleSides, imageAlignmentMap, Resizer, snapTo, wrappedLayouts, wrapperStyle } from '@atlaskit/editor-common/ui';
+import { akEditorBreakoutPadding, akEditorMediaResizeHandlerPaddingWide, akEditorWideLayoutWidth, breakoutWideScaleRatio, DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { embedHeaderHeight } from '@atlaskit/smart-card';
+// eslint-disable-next-line @repo/internal/react/no-class-components
+var ResizableEmbedCard = /*#__PURE__*/function (_React$Component) {
+  _inherits(ResizableEmbedCard, _React$Component);
+  var _super = _createSuper(ResizableEmbedCard);
+  function ResizableEmbedCard() {
+    var _this;
+    _classCallCheck(this, ResizableEmbedCard);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      offsetLeft: _this.calcOffsetLeft()
+    });
+    _defineProperty(_assertThisInitialized(_this), "calcNewSize", function (newWidth, stop) {
+      var _this$props = _this.props,
+        layout = _this$props.layout,
+        state = _this$props.view.state;
+      var newPct = calcPctFromPx(newWidth, _this.props.lineLength) * 100;
+      _this.setState({
+        resizedPctWidth: newPct
+      });
+      var newLayout = hasParentNodeOfType(state.schema.nodes.table)(state.selection) ? layout : _this.calcUnwrappedLayout(newPct, newWidth);
+      if (newPct <= 100) {
+        if (_this.wrappedLayout && (stop ? newPct !== 100 : true)) {
+          newLayout = layout;
+        }
+        return {
+          width: newPct,
+          layout: newLayout
+        };
+      } else {
+        return {
+          width: _this.props.pctWidth || null,
+          layout: newLayout
+        };
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "calcUnwrappedLayout", function (pct, width) {
+      if (pct <= 100) {
+        return 'center';
+      }
+      if (width <= _this.wideLayoutWidth) {
+        return 'wide';
+      }
+      return 'full-width';
+    });
+    _defineProperty(_assertThisInitialized(_this), "calcColumnLeftOffset", function () {
+      var offsetLeft = _this.state.offsetLeft;
+      return _this.insideInlineLike ? calcColumnsFromPx(offsetLeft, _this.props.lineLength, _this.props.gridSize) : 0;
+    });
+    _defineProperty(_assertThisInitialized(_this), "calcPxWidth", function (useLayout) {
+      var _this$props2 = _this.props,
+        layout = _this$props2.layout,
+        pctWidth = _this$props2.pctWidth,
+        lineLength = _this$props2.lineLength,
+        containerWidth = _this$props2.containerWidth,
+        fullWidthMode = _this$props2.fullWidthMode,
+        getPos = _this$props2.getPos,
+        state = _this$props2.view.state;
+      var resizedPctWidth = _this.state.resizedPctWidth;
+      var pos = typeof getPos === 'function' ? getPos() : undefined;
+      return calcMediaPxWidth({
+        origWidth: DEFAULT_EMBED_CARD_WIDTH,
+        origHeight: DEFAULT_EMBED_CARD_HEIGHT,
+        pctWidth: pctWidth,
+        state: state,
+        containerWidth: {
+          width: containerWidth,
+          lineLength: lineLength
+        },
+        isFullWidthModeEnabled: fullWidthMode,
+        layout: useLayout || layout,
+        pos: pos,
+        resizedPctWidth: resizedPctWidth
+      });
+    });
+    _defineProperty(_assertThisInitialized(_this), "highlights", function (newWidth, snapPoints) {
+      var snapWidth = snapTo(newWidth, snapPoints);
+      var _this$props$view$stat = _this.props.view.state.schema.nodes,
+        layoutColumn = _this$props$view$stat.layoutColumn,
+        table = _this$props$view$stat.table,
+        expand = _this$props$view$stat.expand,
+        nestedExpand = _this$props$view$stat.nestedExpand;
+      if (_this.$pos && !!findParentNodeOfTypeClosestToPos(_this.$pos, [layoutColumn, table, expand, nestedExpand].filter(Boolean))) {
+        return [];
+      }
+      if (snapWidth > _this.wideLayoutWidth) {
+        return ['full-width'];
+      }
+      var _this$props3 = _this.props,
+        layout = _this$props3.layout,
+        lineLength = _this$props3.lineLength,
+        gridSize = _this$props3.gridSize;
+      var columns = calcColumnsFromPx(snapWidth, lineLength, gridSize);
+      var columnWidth = Math.round(columns);
+      var highlight = [];
+      if (layout === 'wrap-left' || layout === 'align-start') {
+        highlight.push(0, columnWidth);
+      } else if (layout === 'wrap-right' || layout === 'align-end') {
+        highlight.push(gridSize, gridSize - columnWidth);
+      } else if (_this.insideInlineLike) {
+        highlight.push(Math.round(columns + _this.calcColumnLeftOffset()));
+      } else {
+        highlight.push(Math.floor((gridSize - columnWidth) / 2), Math.ceil((gridSize + columnWidth) / 2));
+      }
+      return highlight;
+    });
+    return _this;
+  }
+  _createClass(ResizableEmbedCard, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      var offsetLeft = this.calcOffsetLeft();
+      if (offsetLeft !== this.state.offsetLeft && offsetLeft >= 0) {
+        this.setState({
+          offsetLeft: offsetLeft
+        });
+      }
+    }
+  }, {
+    key: "wrappedLayout",
+    get: function get() {
+      return wrappedLayouts.indexOf(this.props.layout) > -1;
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (this.props.layout !== nextProps.layout) {
+        this.checkLayout(this.props.layout, nextProps.layout);
+      }
+    }
+
+    /**
+     * When returning to center layout from a wrapped/aligned layout, it might actually
+     * be wide or full-width
+     */
+  }, {
+    key: "checkLayout",
+    value: function checkLayout(oldLayout, newLayout) {
+      var resizedPctWidth = this.state.resizedPctWidth;
+      if (wrappedLayouts.indexOf(oldLayout) > -1 && newLayout === 'center' && resizedPctWidth) {
+        var layout = this.calcUnwrappedLayout(resizedPctWidth, this.calcPxWidth(newLayout));
+        this.props.updateSize(resizedPctWidth, layout);
+      }
+    }
+  }, {
+    key: "$pos",
+    get: function get() {
+      if (typeof this.props.getPos !== 'function') {
+        return null;
+      }
+      var pos = this.props.getPos();
+      if (Number.isNaN(pos) || typeof pos !== 'number') {
+        return null;
+      }
+
+      // need to pass view because we may not get updated props in time
+      return this.props.view.state.doc.resolve(pos);
+    }
+
+    /**
+     * The maxmimum number of grid columns this node can resize to.
+     */
+  }, {
+    key: "gridWidth",
+    get: function get() {
+      var gridSize = this.props.gridSize;
+      return !(this.wrappedLayout || this.insideInlineLike) ? gridSize / 2 : gridSize;
+    }
+  }, {
+    key: "calcOffsetLeft",
+    value: function calcOffsetLeft() {
+      var offsetLeft = 0;
+      if (this.wrapper && this.insideInlineLike) {
+        var currentNode = this.wrapper;
+        var boundingRect = currentNode.getBoundingClientRect();
+        var pmRect = this.props.view.dom.getBoundingClientRect();
+        offsetLeft = boundingRect.left - pmRect.left;
+      }
+      return offsetLeft;
+    }
+  }, {
+    key: "wideLayoutWidth",
+    get: function get() {
+      var lineLength = this.props.lineLength;
+      if (lineLength) {
+        return Math.ceil(lineLength * breakoutWideScaleRatio);
+      } else {
+        return akEditorWideLayoutWidth;
+      }
+    }
+  }, {
+    key: "calcSnapPoints",
+    value: function calcSnapPoints() {
+      var offsetLeft = this.state.offsetLeft;
+      var _this$props4 = this.props,
+        containerWidth = _this$props4.containerWidth,
+        lineLength = _this$props4.lineLength;
+      var snapTargets = [];
+      for (var i = 0; i < this.gridWidth; i++) {
+        snapTargets.push(calcPxFromColumns(i, lineLength, this.gridWidth) - offsetLeft);
+      }
+      // full width
+      snapTargets.push(lineLength - offsetLeft);
+      var minimumWidth = calcPxFromColumns(this.wrappedLayout || this.insideInlineLike ? 1 : 2, lineLength, this.props.gridSize);
+      var snapPoints = snapTargets.filter(function (width) {
+        return width >= minimumWidth;
+      });
+      var $pos = this.$pos;
+      if (!$pos) {
+        return snapPoints;
+      }
+      var isTopLevel = $pos.parent.type.name === 'doc';
+      if (isTopLevel) {
+        snapPoints.push(this.wideLayoutWidth);
+        var fullWidthPoint = containerWidth - akEditorBreakoutPadding;
+        if (fullWidthPoint > this.wideLayoutWidth) {
+          snapPoints.push(fullWidthPoint);
+        }
+      }
+      return snapPoints;
+    }
+  }, {
+    key: "insideInlineLike",
+    get: function get() {
+      var $pos = this.$pos;
+      if (!$pos) {
+        return false;
+      }
+      var listItem = this.props.view.state.schema.nodes.listItem;
+      return !!findParentNodeOfTypeClosestToPos($pos, [listItem]);
+    }
+  }, {
+    key: "getHeightDefiningComponent",
+    value:
+    /**
+     * Previously height of the box was controlled with paddingTop/paddingBottom trick inside Wrapper.
+     * It allowed height to be defined by a given percent ratio and so absolute value was defined by actual width.
+     * Also, it was part of styled component, which was fine because it was static through out life time of component.
+     *
+     * Now, two things changed:
+     * 1. If `height` is present we take it as actual height of the box, and hence we don't need
+     * (or even can't have, due to lack of width value) paddingTop trick.
+     * 2. Since `height` can be changing through out life time of a component, we can't have it as part of styled component,
+     * and hence we use `style` prop.
+     */
+    function getHeightDefiningComponent() {
+      var _this$props5 = this.props,
+        height = _this$props5.height,
+        aspectRatio = _this$props5.aspectRatio;
+      var heightDefiningStyles;
+      if (height) {
+        heightDefiningStyles = {
+          height: "".concat(height, "px")
+        };
+      } else {
+        // paddingBottom css trick defines ratio of `iframe height (y) + header (32)` to `width (x)`,
+        // where is `aspectRatio` defines iframe aspectRatio alone
+        // So, visually:
+        //
+        //            x
+        //       ┌──────────┐
+        //       │  header  │ 32
+        //       ├──────────┤
+        //       │          │
+        //       │  iframe  │ y
+        //       │          │
+        //       └──────────┘
+        //
+        // aspectRatio = x / y
+        // paddingBottom = (y + 32) / x
+        // which can be achieved with css calc() as (1 / (x/y)) * 100)% + 32px
+        heightDefiningStyles = {
+          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ").concat(embedHeaderHeight, "px)")
+        };
+      }
+      return jsx("span", {
+        "data-testid": 'resizable-embed-card-height-definer',
+        style: _objectSpread({
+          display: 'block',
+          /* Fixes extra padding problem in Firefox */
+          fontSize: 0,
+          lineHeight: 0
+        }, heightDefiningStyles)
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$props6 = this.props,
+        layout = _this$props6.layout,
+        pctWidth = _this$props6.pctWidth,
+        containerWidth = _this$props6.containerWidth,
+        fullWidthMode = _this$props6.fullWidthMode,
+        children = _this$props6.children;
+      var initialWidth = this.calcPxWidth() - akEditorMediaResizeHandlerPaddingWide;
+      var enable = {};
+      handleSides.forEach(function (side) {
+        var oppositeSide = side === 'left' ? 'right' : 'left';
+        enable[side] = ['full-width', 'wide', 'center'].concat("wrap-".concat(oppositeSide)).concat("align-".concat(imageAlignmentMap[oppositeSide])).indexOf(layout) > -1;
+        if (side === 'left' && _this2.insideInlineLike) {
+          enable[side] = false;
+        }
+      });
+
+      /* eslint-disable  @atlaskit/design-system/consistent-css-prop-usage */
+      return jsx("div", {
+        css: embedSpacingStyles,
+        "data-testid": "resizable-embed-card-spacing"
+      }, jsx("div", {
+        css: wrapperStyle({
+          layout: layout,
+          isResized: !!pctWidth,
+          containerWidth: containerWidth || DEFAULT_EMBED_CARD_WIDTH,
+          fullWidthMode: fullWidthMode
+        })
+      }, jsx(Resizer, _extends({}, this.props, {
+        width: initialWidth // Starting or initial width of embed <iframe> itself.
+        ,
+        enable: enable,
+        calcNewSize: this.calcNewSize,
+        snapPoints: this.calcSnapPoints(),
+        scaleFactor: !this.wrappedLayout && !this.insideInlineLike ? 2 : 1,
+        highlights: this.highlights,
+        innerPadding: akEditorMediaResizeHandlerPaddingWide,
+        nodeType: "embed"
+      }), children, this.getHeightDefiningComponent())));
+      /* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */
+    }
+  }]);
+  return ResizableEmbedCard;
+}(React.Component);
+_defineProperty(ResizableEmbedCard, "defaultProps", {
+  aspectRatio: DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT
+});
+export { ResizableEmbedCard as default };

package/dist/esm/ui/SmallerEditIcon.js

@@ -0,0 +1,14 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { editIconStyles } from '@atlaskit/editor-common/styles';
+import EditIcon from '@atlaskit/icon/glyph/edit';
+
+/* eslint-disable @atlaskit/design-system/consistent-css-prop-usage */
+export var SmallerEditIcon = function SmallerEditIcon() {
+  return jsx("div", {
+    css: editIconStyles
+  }, jsx(EditIcon, {
+    label: "edit"
+  }));
+};
+/* eslint-enable @atlaskit/design-system/consistent-css-prop-usage */

package/dist/esm/utils.js

@@ -0,0 +1,48 @@
+import { NodeSelection } from 'prosemirror-state';
+import { pluginKey } from './pm-plugins/plugin-key';
+export var appearanceForNodeType = function appearanceForNodeType(spec) {
+  if (spec.name === 'inlineCard') {
+    return 'inline';
+  } else if (spec.name === 'blockCard') {
+    return 'block';
+  } else if (spec.name === 'embedCard') {
+    return 'embed';
+  }
+  return;
+};
+export var selectedCardAppearance = function selectedCardAppearance(state) {
+  if (state.selection instanceof NodeSelection) {
+    return appearanceForNodeType(state.selection.node.type);
+  }
+};
+export var titleUrlPairFromNode = function titleUrlPairFromNode(node) {
+  var attrs = node.attrs;
+  return {
+    url: attrs.url || attrs.data && attrs.data.url,
+    title: attrs.data && attrs.data.title
+  };
+};
+
+/**
+ * Merges the title and url from attributes and CardInfo from the resolved view, preferring the CardInfo.
+ * @param titleUrlPair title and url information from the node attributes
+ * @param info information stored in state from the resolved UI component view
+ */
+export var mergeCardInfo = function mergeCardInfo(titleUrlPair, info) {
+  return {
+    title: info && info.title || titleUrlPair.title,
+    url: info && info.url || titleUrlPair.url
+  };
+};
+export var displayInfoForCard = function displayInfoForCard(node, info) {
+  return mergeCardInfo(titleUrlPairFromNode(node), info);
+};
+export var findCardInfo = function findCardInfo(state) {
+  var pluginState = pluginKey.getState(state);
+  if (!pluginState) {
+    return undefined;
+  }
+  return pluginState.cards.find(function (cardInfo) {
+    return cardInfo.pos === state.selection.from;
+  });
+};

package/dist/esm/version.json

@@ -0,0 +1,5 @@
+{
+	"name": "@atlaskit/editor-plugin-card",
+	"version": "0.1.0",
+	"sideEffects": false
+}

package/dist/types/index.d.ts

@@ -0,0 +1,2 @@
+export { cardPlugin } from './plugin';
+export type { Request } from './types';

package/dist/types/messages.d.ts

@@ -0,0 +1,12 @@
+export declare const messages: {
+    datasourceJiraIssue: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+    datasourceJiraIssueDescription: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { SmartCardProps } from './genericCard';
+export declare class BlockCardComponent extends React.PureComponent<SmartCardProps> {
+    private scrollContainer?;
+    onClick: () => void;
+    static contextTypes: {
+        contextAdapter: PropTypes.Requireable<object>;
+    };
+    UNSAFE_componentWillMount(): void;
+    onResolve: (data: {
+        url?: string | undefined;
+        title?: string | undefined;
+    }) => void;
+    gapCursorSpan: () => JSX.Element | undefined;
+    onError: ({ err }: {
+        err?: Error | undefined;
+    }) => void;
+    render(): JSX.Element;
+}
+export type BlockCardNodeViewProps = Pick<SmartCardProps, 'platform' | 'showServerActions'>;
+export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
+    createDomRef(): HTMLElement;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,42 @@
+/** @jsx jsx */
+import React from 'react';
+import { jsx } from '@emotion/react';
+import PropTypes from 'prop-types';
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import type { PortalProviderAPI } from '@atlaskit/editor-common/portal-provider';
+import ReactNodeView, { getPosHandler, ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { cardPlugin } from '../index';
+import { DatasourceTableLayout } from '../ui/LayoutButton/types';
+interface DatasourceProps extends ReactComponentProps {
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandler;
+    portalProviderAPI: PortalProviderAPI;
+    eventDispatcher: EventDispatcher;
+    hasIntlContext: boolean;
+    pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined;
+}
+interface DatasourceComponentProps extends ReactComponentProps, Pick<DatasourceProps, 'node' | 'view' | 'getPos'> {
+}
+export declare class DatasourceComponent extends React.PureComponent<DatasourceComponentProps> {
+    static contextTypes: {
+        contextAdapter: PropTypes.Requireable<object>;
+    };
+    constructor(props: DatasourceComponentProps);
+    private getPosSafely;
+    private getDatasource;
+    private getTableView;
+    handleColumnChange: (columnKeys: string[]) => void;
+    render(): jsx.JSX.Element | null;
+}
+export declare class Datasource extends ReactNodeView<DatasourceProps> {
+    private tableWidth;
+    constructor(props: DatasourceProps);
+    createDomRef(): HTMLElement;
+    calcTableWidth: (layout: DatasourceTableLayout, containerWidth?: number) => number | 'inherit';
+    render(): jsx.JSX.Element;
+}
+export {};

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Node as PMNode } from 'prosemirror-model';
+import { RichMediaLayout } from '@atlaskit/adf-schema';
+import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import { SmartCardProps } from './genericCard';
+export type EmbedCardState = {
+    hasPreview: boolean;
+    liveHeight?: number;
+    initialAspectRatio?: number;
+};
+export declare class EmbedCardComponent extends React.PureComponent<SmartCardProps, EmbedCardState> {
+    private scrollContainer?;
+    private embedIframeRef;
+    onClick: () => void;
+    static contextTypes: {
+        contextAdapter: PropTypes.Requireable<object>;
+    };
+    state: EmbedCardState;
+    UNSAFE_componentWillMount(): void;
+    private getPosSafely;
+    onResolve: (data: {
+        url?: string | undefined;
+        title?: string | undefined;
+        aspectRatio?: number | undefined;
+    }) => void;
+    updateSize: (pctWidth: number | null, layout: RichMediaLayout) => true | undefined;
+    private getLineLength;
+    /**
+     * Even though render is capable of listening and reacting to iframely wrapper iframe sent `resize` events
+     * it's good idea to store latest actual height in ADF, so that when renderer (well, editor as well) is loading
+     * we will show embed window of appropriate size and avoid unnecessary content jumping.
+     */
+    saveOriginalDimensionsAttributes: (height: number, width: number | undefined) => void;
+    onHeightUpdate: (height: number) => void;
+    onError: ({ err }: {
+        err?: Error | undefined;
+    }) => void;
+    render(): JSX.Element;
+}
+export type EmbedCardNodeViewProps = Pick<SmartCardProps, 'eventDispatcher' | 'allowResizing' | 'platform' | 'fullWidthMode' | 'dispatchAnalyticsEvent' | 'pluginInjectionApi'>;
+export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
+    viewShouldUpdate(nextNode: PMNode): boolean;
+    createDomRef(): HTMLElement;
+    render(): JSX.Element;
+}

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Node as PMNode } from 'prosemirror-model';
+import { EditorView } from 'prosemirror-view';
+import type { DispatchAnalyticsEvent } from '@atlaskit/editor-common/analytics';
+import type { EventDispatcher } from '@atlaskit/editor-common/event-dispatcher';
+import { ProviderFactory } from '@atlaskit/editor-common/provider-factory';
+import { getPosHandler, ReactComponentProps } from '@atlaskit/editor-common/react-node-view';
+import { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { SmartCardContext } from '@atlaskit/link-provider';
+import { CardPlatform } from '@atlaskit/smart-card';
+import type { cardPlugin } from '../index';
+export type EditorContext<T> = React.Context<T> & {
+    value: T;
+};
+export interface CardNodeViewProps extends ReactComponentProps {
+    providerFactory?: ProviderFactory;
+    platform?: CardPlatform;
+    eventDispatcher?: EventDispatcher;
+}
+export interface CardProps extends CardNodeViewProps {
+    children?: React.ReactNode;
+    node: PMNode;
+    view: EditorView;
+    getPos: getPosHandler;
+    dispatchAnalyticsEvent?: DispatchAnalyticsEvent;
+    isMobile?: boolean;
+    eventDispatcher?: EventDispatcher;
+    allowResizing?: boolean;
+    fullWidthMode?: boolean;
+    useAlternativePreloader?: boolean;
+    showServerActions?: boolean;
+    pluginInjectionApi?: ExtractInjectionAPI<typeof cardPlugin>;
+}
+export interface SmartCardProps extends CardProps {
+    cardContext?: EditorContext<typeof SmartCardContext>;
+}
+export declare function Card(SmartCardComponent: React.ComponentType<SmartCardProps>, UnsupportedComponent: React.ComponentType): React.ComponentType<CardProps>;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import type { InlineNodeViewComponentProps } from '@atlaskit/editor-common/react-node-view';
+import { SmartCardProps } from './genericCard';
+export declare class InlineCardComponent extends React.PureComponent<SmartCardProps> {
+    private scrollContainer?;
+    private onClick;
+    static contextTypes: {
+        contextAdapter: PropTypes.Requireable<object>;
+    };
+    UNSAFE_componentWillMount(): void;
+    onResolve: (data: {
+        url?: string | undefined;
+        title?: string | undefined;
+    }) => void;
+    onError: (data: {
+        url?: string | undefined;
+        err?: Error | undefined;
+    }) => void;
+    render(): JSX.Element | null;
+}
+export type InlineCardNodeViewProps = Pick<SmartCardProps, 'useAlternativePreloader' | 'showServerActions'>;
+export declare function InlineCardNodeView(props: InlineNodeViewComponentProps & InlineCardNodeViewProps): JSX.Element;

package/dist/types/plugin.d.ts

@@ -0,0 +1,24 @@
+import type { CardPluginActions } from '@atlaskit/editor-common/card';
+import type { NextEditorPlugin, OptionalPlugin } from '@atlaskit/editor-common/types';
+import type { analyticsPlugin } from '@atlaskit/editor-plugin-analytics';
+import type { decorationsPlugin } from '@atlaskit/editor-plugin-decorations';
+import type featureFlagsPlugin from '@atlaskit/editor-plugin-feature-flags';
+import type { FloatingToolbarPlugin } from '@atlaskit/editor-plugin-floating-toolbar';
+import type { gridPlugin } from '@atlaskit/editor-plugin-grid';
+import type { hyperlinkPlugin } from '@atlaskit/editor-plugin-hyperlink';
+import type { widthPlugin } from '@atlaskit/editor-plugin-width';
+import type { CardPluginOptions, CardPluginState } from './types';
+export declare const cardPlugin: NextEditorPlugin<'card', {
+    pluginConfiguration: CardPluginOptions;
+    dependencies: [
+        typeof featureFlagsPlugin,
+        OptionalPlugin<typeof analyticsPlugin>,
+        typeof widthPlugin,
+        typeof decorationsPlugin,
+        typeof gridPlugin,
+        FloatingToolbarPlugin,
+        typeof hyperlinkPlugin
+    ];
+    sharedState: CardPluginState | null;
+    actions: CardPluginActions;
+}>;

package/dist/types/pm-plugins/actions.d.ts

@@ -0,0 +1,23 @@
+import { Transaction } from 'prosemirror-state';
+import { CardProvider } from '@atlaskit/editor-common/provider-factory';
+import type { DatasourceModalType } from '@atlaskit/editor-common/types';
+import { SmartLinkEvents } from '@atlaskit/smart-card';
+import { CardInfo, CardPluginAction, Request, SmartLinkEventsNext } from '../types';
+import { DatasourceTableLayout } from '../ui/LayoutButton/types';
+export declare const cardAction: (tr: Transaction, action: CardPluginAction) => Transaction;
+export declare const resolveCard: (url: string) => (tr: Transaction) => Transaction;
+export declare const queueCards: (requests: Request[]) => (tr: Transaction) => Transaction;
+export declare const registerCard: (info: CardInfo) => (tr: Transaction) => Transaction;
+export declare const registerSmartCardEvents: (smartLinkEvents: SmartLinkEvents) => (tr: Transaction) => Transaction;
+export declare const registerSmartCardEventsNext: (smartLinkEvents: SmartLinkEventsNext) => (tr: Transaction) => Transaction;
+export declare const setProvider: (cardProvider: CardProvider | null) => (tr: Transaction) => Transaction;
+export declare const setDatasourceTableRef: (datasourceTableRef?: HTMLElement) => (tr: Transaction) => Transaction;
+export declare const setCardLayout: (layout: DatasourceTableLayout) => (tr: Transaction) => Transaction;
+export declare const setCardLayoutAndDatasourceTableRef: ({ layout, datasourceTableRef, }: {
+    layout: DatasourceTableLayout;
+    datasourceTableRef?: HTMLElement | undefined;
+}) => (tr: Transaction) => Transaction;
+export declare const showLinkToolbar: (tr: Transaction) => Transaction;
+export declare const hideLinkToolbar: (tr: Transaction) => Transaction;
+export declare const showDatasourceModal: (modalType: DatasourceModalType) => (tr: Transaction) => Transaction;
+export declare const hideDatasourceModal: (tr: Transaction) => Transaction;