@atlaskit/renderer 127.3.0 → 127.4.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/renderer
 
+## 127.4.0
+
+### Minor Changes
+
+- [`9f0d822dc201f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9f0d822dc201f) -
+  [ux] Wraps block, embed, and inline card nodeviews in the renderer with SmartLinkDraggable. Enable
+  dragging smart links from the editor to the content tree.
+
 ## 127.3.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../editor-smart-link-draggable/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-cc/tsconfig.json"
 		},
@@ -107,6 +110,9 @@
 		{
 			"path": "../../../platform/feature-flags-react/afm-cc/tsconfig.json"
 		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-cc/tsconfig.json"
+		},
 		{
 			"path": "../../../react-ufo/atlaskit/afm-cc/tsconfig.json"
 		},

package/afm-jira/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../editor-smart-link-draggable/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-jira/tsconfig.json"
 		},
@@ -107,6 +110,9 @@
 		{
 			"path": "../../../platform/feature-flags-react/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../react-ufo/atlaskit/afm-jira/tsconfig.json"
 		},

package/afm-products/tsconfig.json

@@ -59,6 +59,9 @@
 		{
 			"path": "../../editor-shared-styles/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../editor-smart-link-draggable/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../elements/emoji/afm-products/tsconfig.json"
 		},
@@ -107,6 +110,9 @@
 		{
 			"path": "../../../platform/feature-flags-react/afm-products/tsconfig.json"
 		},
+		{
+			"path": "../../../pragmatic-drag-and-drop/core/afm-products/tsconfig.json"
+		},
 		{
 			"path": "../../../react-ufo/atlaskit/afm-products/tsconfig.json"
 		},

package/dist/cjs/react/nodes/blockCard.js

@@ -10,6 +10,7 @@ var _react = require("@emotion/react");
 var _smartCard = require("@atlaskit/smart-card");
 var _ui = require("@atlaskit/editor-common/ui");
 var _fallback = require("./fallback");
+var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
 var _inlineCard = _interopRequireDefault(require("./inlineCard"));
 var _analyticsNext = require("@atlaskit/analytics-next");
@@ -189,7 +190,11 @@ function BlockCard(props) {
       onError: onError
     }));
   }
-  return (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
+  return (0, _react.jsx)(_editorSmartLinkDraggable.SmartLinkDraggable, {
+    url: url || '',
+    appearance: _editorSmartLinkDraggable.SMART_LINK_APPERANCE.BLOCK,
+    source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.RENDERER
+  }, (0, _react.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, (0, _react.jsx)("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -203,5 +208,5 @@ function BlockCard(props) {
     onSetLinkTarget: onSetLinkTarget
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), cardComponent)));
+  }, cardProps), cardComponent))));
 }

package/dist/cjs/react/nodes/embedCard.js

@@ -19,6 +19,7 @@ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _fallback = require("./fallback");
+var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
 var _consts = require("../../consts");
 var _style = require("../../ui/Renderer/style");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
@@ -201,7 +202,11 @@ function EmbedCardInternal(props) {
     }
     return (
       // Ignored via go/ees005
-      (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
+      (0, _react.jsx)(_editorSmartLinkDraggable.SmartLinkDraggable, {
+        url: url || '',
+        appearance: _editorSmartLinkDraggable.SMART_LINK_APPERANCE.EMBED,
+        source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.RENDERER
+      }, (0, _react.jsx)(_fallback.CardErrorBoundary, (0, _extends2.default)({
         unsupportedComponent: _ui.UnsupportedBlock,
         onSetLinkTarget: onSetLinkTarget
         // eslint-disable-next-line react/jsx-props-no-spreading
@@ -239,7 +244,7 @@ function EmbedCardInternal(props) {
           className: _consts.RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + _consts.RendererCssClassName.FLEX_CENTER_WRAPPER,
           css: embedCardCenterWrapperStyles
         }, mediaSingle) : mediaSingle;
-      }()))
+      }())))
     );
   }));
 }

package/dist/cjs/react/nodes/inlineCard.js

@@ -22,6 +22,7 @@ var _platformFeatureFlagsReact = require("@atlaskit/platform-feature-flags-react
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _analytics = require("@atlaskit/editor-common/analytics");
+var _editorSmartLinkDraggable = require("@atlaskit/editor-smart-link-draggable");
 var _fallback = require("./fallback");
 var _SmartCardStorage = require("../../ui/SmartCardStorage");
 var _getCardClickHandler = require("../utils/getCardClickHandler");
@@ -301,7 +302,11 @@ var InlineCard = function InlineCard(props) {
       disablePreviewPanel: true
     }))), CompetitorPromptComponent);
   }
-  return (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
+  return (0, _react2.jsx)(_editorSmartLinkDraggable.SmartLinkDraggable, {
+    url: url || '',
+    appearance: _editorSmartLinkDraggable.SMART_LINK_APPERANCE.INLINE,
+    source: _editorSmartLinkDraggable.SMART_LINK_DRAG_TYPES.RENDERER
+  }, (0, _react2.jsx)(_analyticsNext.AnalyticsContext, {
     data: analyticsData
   }, (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-inline-card": true,
@@ -340,7 +345,7 @@ var InlineCard = function InlineCard(props) {
     disablePreviewPanel: (0, _experiments.editorExperiment)('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  })))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent))));
 };
 var _default_1 = (0, _SmartCardStorage.withSmartCardStorage)(InlineCard);
 var _default = exports.default = _default_1;

package/dist/cjs/ui/Renderer/index.js

@@ -71,7 +71,7 @@ var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "127.2.1";
+var packageVersion = "127.3.0";
 var setAsQueryContainerStyles = (0, _react2.css)({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/es2019/react/nodes/blockCard.js

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import InlineCard from './inlineCard';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
@@ -178,7 +179,11 @@ export default function BlockCard(props) {
       onError: onError
     }));
   }
-  return jsx(AnalyticsContext, {
+  return jsx(SmartLinkDraggable, {
+    url: url || '',
+    appearance: SMART_LINK_APPERANCE.BLOCK,
+    source: SMART_LINK_DRAG_TYPES.RENDERER
+  }, jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -192,5 +197,5 @@ export default function BlockCard(props) {
     onSetLinkTarget: onSetLinkTarget
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), cardComponent)));
+  }, cardProps), cardComponent))));
 }

package/dist/es2019/react/nodes/embedCard.js

@@ -17,6 +17,7 @@ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CardErrorBoundary } from './fallback';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { RendererCssClassName } from '../../consts';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -189,7 +190,11 @@ function EmbedCardInternal(props) {
     }
     return (
       // Ignored via go/ees005
-      jsx(CardErrorBoundary, _extends({
+      jsx(SmartLinkDraggable, {
+        url: url || '',
+        appearance: SMART_LINK_APPERANCE.EMBED,
+        source: SMART_LINK_DRAG_TYPES.RENDERER
+      }, jsx(CardErrorBoundary, _extends({
         unsupportedComponent: UnsupportedBlock,
         onSetLinkTarget: onSetLinkTarget
         // eslint-disable-next-line react/jsx-props-no-spreading
@@ -227,7 +232,7 @@ function EmbedCardInternal(props) {
           className: RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
           css: embedCardCenterWrapperStyles
         }, mediaSingle) : mediaSingle;
-      })()))
+      })())))
     );
   }));
 }

package/dist/es2019/react/nodes/inlineCard.js

@@ -20,6 +20,7 @@ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -286,7 +287,11 @@ const InlineCard = props => {
       disablePreviewPanel: true
     }))), CompetitorPromptComponent);
   }
-  return jsx(AnalyticsContext, {
+  return jsx(SmartLinkDraggable, {
+    url: url || '',
+    appearance: SMART_LINK_APPERANCE.INLINE,
+    source: SMART_LINK_DRAG_TYPES.RENDERER
+  }, jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("span", _extends({
     "data-inline-card": true,
@@ -325,7 +330,7 @@ const InlineCard = props => {
     disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  })))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent))));
 };
 const _default_1 = withSmartCardStorage(InlineCard);
 export default _default_1;

package/dist/es2019/ui/Renderer/index.js

@@ -57,7 +57,7 @@ export const DEGRADED_SEVERITY_THRESHOLD = 3000;
 const TABLE_INFO_TIMEOUT = 10000;
 const RENDER_EVENT_SAMPLE_RATE = 0.2;
 const packageName = "@atlaskit/renderer";
-const packageVersion = "127.2.1";
+const packageVersion = "127.3.0";
 const setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/dist/esm/react/nodes/blockCard.js

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/react';
 import { Card } from '@atlaskit/smart-card';
 import { UnsupportedBlock, UnsupportedInline, WidthConsumer } from '@atlaskit/editor-common/ui';
 import { CardErrorBoundary } from './fallback';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
 import InlineCard from './inlineCard';
 import { AnalyticsContext } from '@atlaskit/analytics-next';
@@ -181,7 +182,11 @@ export default function BlockCard(props) {
       onError: onError
     }));
   }
-  return jsx(AnalyticsContext, {
+  return jsx(SmartLinkDraggable, {
+    url: url || '',
+    appearance: SMART_LINK_APPERANCE.BLOCK,
+    source: SMART_LINK_DRAG_TYPES.RENDERER
+  }, jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("div", {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -195,5 +200,5 @@ export default function BlockCard(props) {
     onSetLinkTarget: onSetLinkTarget
     // Ignored via go/ees005
     // eslint-disable-next-line react/jsx-props-no-spreading
-  }, cardProps), cardComponent)));
+  }, cardProps), cardComponent))));
 }

package/dist/esm/react/nodes/embedCard.js

@@ -18,6 +18,7 @@ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { CardErrorBoundary } from './fallback';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { RendererCssClassName } from '../../consts';
 import { FullPagePadding } from '../../ui/Renderer/style';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -193,7 +194,11 @@ function EmbedCardInternal(props) {
     }
     return (
       // Ignored via go/ees005
-      jsx(CardErrorBoundary, _extends({
+      jsx(SmartLinkDraggable, {
+        url: url || '',
+        appearance: SMART_LINK_APPERANCE.EMBED,
+        source: SMART_LINK_DRAG_TYPES.RENDERER
+      }, jsx(CardErrorBoundary, _extends({
         unsupportedComponent: UnsupportedBlock,
         onSetLinkTarget: onSetLinkTarget
         // eslint-disable-next-line react/jsx-props-no-spreading
@@ -231,7 +236,7 @@ function EmbedCardInternal(props) {
           className: RendererCssClassName.EMBED_CARD_CENTER_WRAPPER + ' ' + RendererCssClassName.FLEX_CENTER_WRAPPER,
           css: embedCardCenterWrapperStyles
         }, mediaSingle) : mediaSingle;
-      }()))
+      }())))
     );
   }));
 }

package/dist/esm/react/nodes/inlineCard.js

@@ -21,6 +21,7 @@ import { componentWithCondition } from '@atlaskit/platform-feature-flags-react';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE } from '@atlaskit/editor-common/analytics';
+import { SmartLinkDraggable, SMART_LINK_DRAG_TYPES, SMART_LINK_APPERANCE } from '@atlaskit/editor-smart-link-draggable';
 import { CardErrorBoundary } from './fallback';
 import { withSmartCardStorage } from '../../ui/SmartCardStorage';
 import { getCardClickHandler } from '../utils/getCardClickHandler';
@@ -292,7 +293,11 @@ var InlineCard = function InlineCard(props) {
       disablePreviewPanel: true
     }))), CompetitorPromptComponent);
   }
-  return jsx(AnalyticsContext, {
+  return jsx(SmartLinkDraggable, {
+    url: url || '',
+    appearance: SMART_LINK_APPERANCE.INLINE,
+    source: SMART_LINK_DRAG_TYPES.RENDERER
+  }, jsx(AnalyticsContext, {
     data: analyticsData
   }, jsx("span", _extends({
     "data-inline-card": true,
@@ -331,7 +336,7 @@ var InlineCard = function InlineCard(props) {
     disablePreviewPanel: editorExperiment('platform_editor_preview_panel_linking_exp', true, {
       exposure: true
     })
-  })))), CompetitorPromptComponent)));
+  })))), CompetitorPromptComponent))));
 };
 var _default_1 = withSmartCardStorage(InlineCard);
 export default _default_1;

package/dist/esm/ui/Renderer/index.js

@@ -62,7 +62,7 @@ export var DEGRADED_SEVERITY_THRESHOLD = 3000;
 var TABLE_INFO_TIMEOUT = 10000;
 var RENDER_EVENT_SAMPLE_RATE = 0.2;
 var packageName = "@atlaskit/renderer";
-var packageVersion = "127.2.1";
+var packageVersion = "127.3.0";
 var setAsQueryContainerStyles = css({
   containerName: 'ak-renderer-wrapper',
   containerType: 'inline-size'

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/renderer",
-	"version": "127.3.0",
+	"version": "127.4.0",
 	"description": "Renderer component",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -36,6 +36,7 @@
 		"@atlaskit/editor-palette": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
 		"@atlaskit/editor-shared-styles": "^3.10.0",
+		"@atlaskit/editor-smart-link-draggable": "^0.1.0",
 		"@atlaskit/emoji": "^69.10.0",
 		"@atlaskit/feature-gate-js-client": "^5.5.0",
 		"@atlaskit/icon": "^32.0.0",
@@ -52,13 +53,14 @@
 		"@atlaskit/media-viewer": "^52.8.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
 		"@atlaskit/react-ufo": "^5.4.0",
 		"@atlaskit/smart-card": "^43.26.0",
 		"@atlaskit/status": "^3.1.0",
 		"@atlaskit/task-decision": "^19.3.0",
 		"@atlaskit/theme": "^22.0.0",
-		"@atlaskit/tmp-editor-statsig": "^35.3.0",
-		"@atlaskit/tokens": "^11.0.0",
+		"@atlaskit/tmp-editor-statsig": "^35.5.0",
+		"@atlaskit/tokens": "^11.1.0",
 		"@atlaskit/tooltip": "^20.14.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -71,7 +73,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^111.31.0",
+		"@atlaskit/editor-common": "^111.32.0",
 		"@atlaskit/link-provider": "^4.2.0",
 		"@atlaskit/media-core": "^37.0.0",
 		"react": "^18.2.0",
@@ -90,7 +92,7 @@
 		"@atlaskit/mention": "^24.5.0",
 		"@atlaskit/modal-dialog": "^14.11.0",
 		"@atlaskit/navigation-next": "patch:@atlaskit/navigation-next@npm%3A9.0.17#~/.yarn/patches/@atlaskit-navigation-next-npm-9.0.17-958ca0ab9d.patch",
-		"@atlaskit/profilecard": "^24.42.0",
+		"@atlaskit/profilecard": "^24.43.0",
 		"@atlaskit/util-data-test": "^18.5.0",
 		"@atlassian/a11y-jest-testing": "^0.10.0",
 		"@atlassian/feature-flags-test-utils": "^1.0.0",