@atlaskit/editor-plugin-card 2.9.1 → 2.9.3

package/dist/esm/toDOM-fixes/embedCard.js

@@ -0,0 +1,112 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Some of these functions and styling are duplicated from their custom node view equivalents
+ *
+ * WHY?
+ * This will eventually move to `@atlaskit/adf-schema` and we cannot reference
+ * `@atlaskit/editor-common` from here or it will cause dependency issues.
+ *
+ * In the long term likely `toDOM` will move back out of `adf-schema` in which
+ * case we can consolidate them.
+ */
+import { embedCard } from '@atlaskit/adf-schema';
+import { convertToInlineCss } from '@atlaskit/editor-common/lazy-node-view';
+import { DEFAULT_EMBED_CARD_HEIGHT, DEFAULT_EMBED_CARD_WIDTH } from '@atlaskit/editor-shared-styles';
+import { fg } from '@atlaskit/platform-feature-flags';
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcMargin(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return '12px auto 12px 12px';
+    case 'wrap-left':
+      return '12px 12px 12px auto';
+    default:
+      return '24px auto';
+  }
+}
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function float(layout) {
+  switch (layout) {
+    case 'wrap-right':
+      return 'right';
+    case 'wrap-left':
+      return 'left';
+    default:
+      return 'none';
+  }
+}
+
+// From `packages/editor/editor-common/src/media-single/constants.ts`
+var MEDIA_SINGLE_GUTTER_SIZE = 24;
+
+// From `packages/editor/editor-common/src/ui/MediaSingle/styled.tsx`
+function calcPxFromPct(pct, lineLength) {
+  var maxWidth = lineLength + MEDIA_SINGLE_GUTTER_SIZE;
+  return maxWidth * pct - MEDIA_SINGLE_GUTTER_SIZE;
+}
+
+// ED-24488: We can't retrieve the editor width from here easily.
+// For now we're using the default line length here, but this will be
+// incorrect on smaller devices.
+var LINE_LENGTH = 760;
+
+// @nodeSpecException:toDOM patch
+export var embedCardSpecWithFixedToDOM = function embedCardSpecWithFixedToDOM() {
+  if (!fg('platform_editor_lazy-node-views')) {
+    return embedCard;
+  }
+  return _objectSpread(_objectSpread({}, embedCard), {}, {
+    toDOM: function toDOM(node) {
+      var _node$attrs = node.attrs,
+        url = _node$attrs.url,
+        layout = _node$attrs.layout,
+        width = _node$attrs.width,
+        originalWidth = _node$attrs.originalWidth,
+        originalHeight = _node$attrs.originalHeight;
+      var aspectRatio = originalWidth && originalHeight ? originalWidth / originalHeight : DEFAULT_EMBED_CARD_WIDTH / DEFAULT_EMBED_CARD_HEIGHT;
+      var attrs = {
+        'data-embed-card': '',
+        'data-card-url': url,
+        'data-layout': layout,
+        'data-width': width,
+        'data-original-width': originalWidth,
+        'data-original-height': originalHeight,
+        class: 'embedCardView-content-wrap',
+        // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+        style: convertToInlineCss({
+          margin: calcMargin(layout),
+          width: "".concat(Math.ceil(calcPxFromPct(width / 100, LINE_LENGTH)), "px"),
+          marginRight: layout === 'align-end' ? '0' : '',
+          marginLeft: layout === 'align-start' ? '0' : '',
+          float: float(layout)
+        })
+      };
+      return ['div', attrs,
+      // This is the only modification to the embed card `toDOM`
+      // This is to match the behaviour of Card which lazy loads
+      // and uses just a URL as a fallback
+      //
+      // To match: `packages/linking-platform/smart-card/src/view/CardWithUrl/component-lazy/LoadingCardLink.tsx`
+      ['a', {
+        style: convertToInlineCss({
+          marginLeft: "var(--ds-space-negative-025, -2px)",
+          boxDecorationBreak: 'clone',
+          WebkitBoxDecorationBreak: 'clone',
+          padding: "var(--ds-space-025, 2px)".concat(" 0px"),
+          lineHeight: '22px'
+        })
+      }, url !== null && url !== void 0 ? url : ''],
+      // From `packages/editor/editor-plugin-card/src/ui/ResizableEmbedCard.tsx`
+      // The `getHeightDefiningComponent` that defines the height of the element
+      ['span', {
+        style: convertToInlineCss({
+          display: 'block',
+          paddingBottom: "calc(".concat((1 / aspectRatio * 100).toFixed(3), "% + ", "var(--ds-space-400, 32px)", ")")
+        })
+      }]];
+    }
+  });
+};

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { type getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
+import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
-import type { Decoration, DecorationSource } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
+import { Datasource } from '../nodeviews/datasource';
 import type { SmartCardProps } from './genericCard';
 export declare class BlockCardComponent extends React.PureComponent<SmartCardProps> {
     private scrollContainer?;
@@ -30,3 +32,14 @@ export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
     render(): JSX.Element;
     destroy(): void;
 }
+export interface BlockCardNodeViewProperties {
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    platform: BlockCardNodeViewProps['platform'];
+    actionOptions: BlockCardNodeViewProps['actionOptions'];
+    showServerActions: BlockCardNodeViewProps['showServerActions'];
+    pluginInjectionApi: BlockCardNodeViewProps['pluginInjectionApi'];
+    onClickCallback: BlockCardNodeViewProps['onClickCallback'];
+    allowDatasource: boolean | undefined;
+    inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
+}
+export declare const blockCardNodeView: ({ pmPluginFactoryParams, platform, actionOptions, showServerActions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => Datasource | BlockCard | import("prosemirror-view").NodeView;

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

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { cardPlugin } from '../index';
 import type { SmartCardProps } from './genericCard';
 export type EmbedCardState = {
     hasPreview: boolean;
@@ -47,3 +50,14 @@ export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     render(): JSX.Element;
     destroy(): void;
 }
+export interface EmbedCardNodeViewProperties {
+    allowResizing: EmbedCardNodeViewProps['allowResizing'];
+    platform: EmbedCardNodeViewProps['platform'];
+    fullWidthMode: EmbedCardNodeViewProps['fullWidthMode'];
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined;
+    actionOptions: EmbedCardNodeViewProps['actionOptions'];
+    showServerActions: EmbedCardNodeViewProps['showServerActions'];
+    onClickCallback: EmbedCardNodeViewProps['onClickCallback'];
+}
+export declare const embedCardNodeView: ({ allowResizing, platform, fullWidthMode, pmPluginFactoryParams, pluginInjectionApi, actionOptions, showServerActions, onClickCallback, }: EmbedCardNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => EmbedCard;

package/dist/types/nodeviews/lazy-block-card.d.ts

@@ -0,0 +1,2 @@
+import { type BlockCardNodeViewProperties } from './blockCard';
+export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("./datasource").Datasource | import("./blockCard").BlockCard | import("prosemirror-view").NodeView) | import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types/nodeviews/lazy-embed-card.d.ts

@@ -0,0 +1,2 @@
+import { type EmbedCardNodeViewProperties } from './embedCard';
+export declare const lazyEmbedCardView: (props: EmbedCardNodeViewProperties) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined) => import("./embedCard").EmbedCard);

package/dist/types/toDOM-fixes/blockCard.d.ts

@@ -0,0 +1 @@
+export declare const blockCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types/toDOM-fixes/embedCard.d.ts

@@ -0,0 +1 @@
+export declare const embedCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import ReactNodeView, { type getInlineNodeViewProducer } from '@atlaskit/editor-common/react-node-view';
+import type { PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node } from '@atlaskit/editor-prosemirror/model';
-import type { Decoration, DecorationSource } from '@atlaskit/editor-prosemirror/view';
+import type { Decoration, DecorationSource, EditorView } from '@atlaskit/editor-prosemirror/view';
+import { Datasource } from '../nodeviews/datasource';
 import type { SmartCardProps } from './genericCard';
 export declare class BlockCardComponent extends React.PureComponent<SmartCardProps> {
     private scrollContainer?;
@@ -30,3 +32,14 @@ export declare class BlockCard extends ReactNodeView<BlockCardNodeViewProps> {
     render(): JSX.Element;
     destroy(): void;
 }
+export interface BlockCardNodeViewProperties {
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    platform: BlockCardNodeViewProps['platform'];
+    actionOptions: BlockCardNodeViewProps['actionOptions'];
+    showServerActions: BlockCardNodeViewProps['showServerActions'];
+    pluginInjectionApi: BlockCardNodeViewProps['pluginInjectionApi'];
+    onClickCallback: BlockCardNodeViewProps['onClickCallback'];
+    allowDatasource: boolean | undefined;
+    inlineCardViewProducer: ReturnType<typeof getInlineNodeViewProducer>;
+}
+export declare const blockCardNodeView: ({ pmPluginFactoryParams, platform, actionOptions, showServerActions, pluginInjectionApi, onClickCallback, allowDatasource, inlineCardViewProducer, }: BlockCardNodeViewProperties) => (node: Node, view: EditorView, getPos: () => number | undefined, decorations: readonly Decoration[]) => Datasource | BlockCard | import("prosemirror-view").NodeView;

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

@@ -2,7 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import type { RichMediaLayout } from '@atlaskit/adf-schema';
 import ReactNodeView from '@atlaskit/editor-common/react-node-view';
+import type { ExtractInjectionAPI, PMPluginFactoryParams } from '@atlaskit/editor-common/types';
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
+import type { EditorView } from '@atlaskit/editor-prosemirror/view';
+import type { cardPlugin } from '../index';
 import type { SmartCardProps } from './genericCard';
 export type EmbedCardState = {
     hasPreview: boolean;
@@ -47,3 +50,14 @@ export declare class EmbedCard extends ReactNodeView<EmbedCardNodeViewProps> {
     render(): JSX.Element;
     destroy(): void;
 }
+export interface EmbedCardNodeViewProperties {
+    allowResizing: EmbedCardNodeViewProps['allowResizing'];
+    platform: EmbedCardNodeViewProps['platform'];
+    fullWidthMode: EmbedCardNodeViewProps['fullWidthMode'];
+    pmPluginFactoryParams: PMPluginFactoryParams;
+    pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined;
+    actionOptions: EmbedCardNodeViewProps['actionOptions'];
+    showServerActions: EmbedCardNodeViewProps['showServerActions'];
+    onClickCallback: EmbedCardNodeViewProps['onClickCallback'];
+}
+export declare const embedCardNodeView: ({ allowResizing, platform, fullWidthMode, pmPluginFactoryParams, pluginInjectionApi, actionOptions, showServerActions, onClickCallback, }: EmbedCardNodeViewProperties) => (node: PMNode, view: EditorView, getPos: () => number | undefined) => EmbedCard;

package/dist/types-ts4.5/nodeviews/lazy-block-card.d.ts

@@ -0,0 +1,2 @@
+import { type BlockCardNodeViewProperties } from './blockCard';
+export declare const lazyBlockCardView: (props: BlockCardNodeViewProperties) => ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined, decorations: readonly import("prosemirror-view").Decoration[]) => import("./datasource").Datasource | import("./blockCard").BlockCard | import("prosemirror-view").NodeView) | import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor;

package/dist/types-ts4.5/nodeviews/lazy-embed-card.d.ts

@@ -0,0 +1,2 @@
+import { type EmbedCardNodeViewProperties } from './embedCard';
+export declare const lazyEmbedCardView: (props: EmbedCardNodeViewProperties) => import("@atlaskit/editor-common/lazy-node-view").NodeViewConstructor | ((node: import("prosemirror-model").Node, view: import("prosemirror-view").EditorView, getPos: () => number | undefined) => import("./embedCard").EmbedCard);

package/dist/types-ts4.5/toDOM-fixes/blockCard.d.ts

@@ -0,0 +1 @@
+export declare const blockCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/dist/types-ts4.5/toDOM-fixes/embedCard.d.ts

@@ -0,0 +1 @@
+export declare const embedCardSpecWithFixedToDOM: () => import("prosemirror-model").NodeSpec;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-card",
-	"version": "2.9.1",
+	"version": "2.9.3",
 	"description": "Card plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/adf-schema": "^40.3.0",
 		"@atlaskit/analytics-next": "^9.3.0",
 		"@atlaskit/custom-steps": "^0.6.0",
-		"@atlaskit/editor-common": "^87.2.0",
+		"@atlaskit/editor-common": "^87.3.0",
 		"@atlaskit/editor-plugin-analytics": "^1.6.0",
 		"@atlaskit/editor-plugin-decorations": "^1.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.2.0",
@@ -47,18 +47,18 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/frontend-utilities": "^2.7.0",
-		"@atlaskit/icon": "^22.8.0",
+		"@atlaskit/icon": "^22.10.0",
 		"@atlaskit/link-analytics": "^8.3.0",
-		"@atlaskit/link-client-extension": "^1.10.0",
+		"@atlaskit/link-client-extension": "^1.11.0",
 		"@atlaskit/link-datasource": "^2.9.0",
 		"@atlaskit/linking-common": "^5.8.0",
 		"@atlaskit/linking-types": "^8.12.0",
 		"@atlaskit/menu": "2.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
-		"@atlaskit/smart-card": "^27.11.0",
+		"@atlaskit/smart-card": "^27.12.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"lodash": "^4.17.21",
@@ -104,6 +104,10 @@
 		}
 	},
 	"platform-feature-flags": {
+		"enable_datasource_react_sweet_state": {
+			"type": "boolean",
+			"referenceOnly": true
+		},
 		"enable_datasource_nourl_edit_dropdown_datafetch": {
 			"type": "boolean"
 		},
@@ -125,6 +129,9 @@
 		"platform.linking-platform.datasource.enable-confluence-search-modal": {
 			"type": "boolean"
 		},
+		"platform_editor_lazy-node-views": {
+			"type": "boolean"
+		},
 		"platform.editor.card.inject-settings-button": {
 			"type": "boolean"
 		},