@atlaskit/editor-plugin-card 0.14.24 → 0.14.25

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-plugin-card
 
+## 0.14.25
+
+### Patch Changes
+
+- [#63612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/63612) [`30f0f85d5af6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/30f0f85d5af6) - Disable datasource table resize button when the component is nested inside another component.
+- Updated dependencies
+
 ## 0.14.24
 
 ### Patch Changes

package/dist/cjs/nodeviews/datasource.js

@@ -183,6 +183,7 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
     _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
     var sharedState = props === null || props === void 0 || (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 || (_props$pluginInjectio = _props$pluginInjectio.width) === null || _props$pluginInjectio === void 0 ? void 0 : _props$pluginInjectio.sharedState;
     _this2.tableWidth = sharedState === null || sharedState === void 0 || (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    _this2.isNodeNested = props.isNodeNested;
     sharedState === null || sharedState === void 0 || sharedState.onChange(function (_ref3) {
       var nextSharedState = _ref3.nextSharedState;
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
@@ -211,7 +212,7 @@ var Datasource = exports.Datasource = /*#__PURE__*/function (_ReactNodeView) {
       }, (0, _react2.jsx)("div", {
         className: _styles.DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
-          minWidth: (0, _utils.calcBreakoutWidth)(attrs.layout, this.tableWidth)
+          minWidth: this.isNodeNested ? '100%' : (0, _utils.calcBreakoutWidth)(attrs.layout, this.tableWidth)
         }
       }, (0, _react2.jsx)(DatasourceComponent, {
         node: this.node,

package/dist/cjs/pm-plugins/main.js

@@ -155,12 +155,16 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
                 var _node$attrs2;
                 // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
                 var layout = (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+                var isNested = selection.$anchor.depth > 0;
 
-                // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
-                dispatch((0, _actions.setCardLayoutAndDatasourceTableRef)({
-                  datasourceTableRef: datasourceTableRef,
-                  layout: layout
-                })(tr));
+                // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
+                if (!isNested) {
+                  // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+                  dispatch((0, _actions.setCardLayoutAndDatasourceTableRef)({
+                    datasourceTableRef: datasourceTableRef,
+                    layout: layout
+                  })(tr));
+                }
               }
             } else {
               if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
@@ -223,6 +227,9 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
             if (isDatasource) {
               var _node$attrs4;
               if (options.allowDatasource && platform !== 'mobile' && (0, _utils.canRenderDatasource)(node === null || node === void 0 || (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 || (_node$attrs4 = _node$attrs4.datasource) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.id)) {
+                var datasourcePosition = typeof getPos === 'function' && getPos();
+                var datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
+                var isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
                 return new _datasource.Datasource({
                   node: node,
                   view: view,
@@ -230,7 +237,8 @@ var createPlugin = exports.createPlugin = function createPlugin(options, pluginI
                   portalProviderAPI: portalProviderAPI,
                   eventDispatcher: eventDispatcher,
                   hasIntlContext: hasIntlContext,
-                  pluginInjectionApi: pluginInjectionApi
+                  pluginInjectionApi: pluginInjectionApi,
+                  isNodeNested: isNodeNested
                 }).init();
               } else {
                 return inlineCardViewProducer(node, view, getPos, decorations);

package/dist/es2019/nodeviews/datasource.js

@@ -150,6 +150,7 @@ export class Datasource extends ReactNodeView {
     super(props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
     const sharedState = props === null || props === void 0 ? void 0 : (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 ? void 0 : (_props$pluginInjectio2 = _props$pluginInjectio.width) === null || _props$pluginInjectio2 === void 0 ? void 0 : _props$pluginInjectio2.sharedState;
     this.tableWidth = sharedState === null || sharedState === void 0 ? void 0 : (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    this.isNodeNested = props.isNodeNested;
     sharedState === null || sharedState === void 0 ? void 0 : sharedState.onChange(({
       nextSharedState
     }) => {
@@ -177,7 +178,7 @@ export class Datasource extends ReactNodeView {
     }, jsx("div", {
       className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
       style: {
-        minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
+        minWidth: this.isNodeNested ? '100%' : calcBreakoutWidth(attrs.layout, this.tableWidth)
       }
     }, jsx(DatasourceComponent, {
       node: this.node,

package/dist/es2019/pm-plugins/main.js

@@ -144,12 +144,16 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
               var _node$attrs2;
               // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
               const layout = (node === null || node === void 0 ? void 0 : (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+              const isNested = selection.$anchor.depth > 0;
 
-              // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
-              dispatch(setCardLayoutAndDatasourceTableRef({
-                datasourceTableRef,
-                layout
-              })(tr));
+              // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
+              if (!isNested) {
+                // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+                dispatch(setCardLayoutAndDatasourceTableRef({
+                  datasourceTableRef,
+                  layout
+                })(tr));
+              }
             }
           } else {
             if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
@@ -214,6 +218,9 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
           if (isDatasource) {
             var _node$attrs4, _node$attrs4$datasour;
             if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 ? void 0 : (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 ? void 0 : (_node$attrs4$datasour = _node$attrs4.datasource) === null || _node$attrs4$datasour === void 0 ? void 0 : _node$attrs4$datasour.id)) {
+              const datasourcePosition = typeof getPos === 'function' && getPos();
+              const datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
+              const isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
               return new Datasource({
                 node,
                 view,
@@ -221,7 +228,8 @@ export const createPlugin = (options, pluginInjectionApi) => pmPluginFactoryPara
                 portalProviderAPI,
                 eventDispatcher,
                 hasIntlContext,
-                pluginInjectionApi
+                pluginInjectionApi,
+                isNodeNested
               }).init();
             } else {
               return inlineCardViewProducer(node, view, getPos, decorations);

package/dist/esm/nodeviews/datasource.js

@@ -177,6 +177,7 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
     _this2 = _super2.call(this, props.node, props.view, props.getPos, props.portalProviderAPI, props.eventDispatcher, props, undefined, true, undefined, props.hasIntlContext);
     var sharedState = props === null || props === void 0 || (_props$pluginInjectio = props.pluginInjectionApi) === null || _props$pluginInjectio === void 0 || (_props$pluginInjectio = _props$pluginInjectio.width) === null || _props$pluginInjectio === void 0 ? void 0 : _props$pluginInjectio.sharedState;
     _this2.tableWidth = sharedState === null || sharedState === void 0 || (_sharedState$currentS = sharedState.currentState()) === null || _sharedState$currentS === void 0 ? void 0 : _sharedState$currentS.width;
+    _this2.isNodeNested = props.isNodeNested;
     sharedState === null || sharedState === void 0 || sharedState.onChange(function (_ref3) {
       var nextSharedState = _ref3.nextSharedState;
       if (nextSharedState !== null && nextSharedState !== void 0 && nextSharedState.width && _this2.tableWidth !== (nextSharedState === null || nextSharedState === void 0 ? void 0 : nextSharedState.width)) {
@@ -205,7 +206,7 @@ export var Datasource = /*#__PURE__*/function (_ReactNodeView) {
       }, jsx("div", {
         className: DATASOURCE_INNER_CONTAINER_CLASSNAME,
         style: {
-          minWidth: calcBreakoutWidth(attrs.layout, this.tableWidth)
+          minWidth: this.isNodeNested ? '100%' : calcBreakoutWidth(attrs.layout, this.tableWidth)
         }
       }, jsx(DatasourceComponent, {
         node: this.node,

package/dist/esm/pm-plugins/main.js

@@ -143,12 +143,16 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
                 var _node$attrs2;
                 // since we use the plugin state, which is a shared state, we need to update the datasourceTableRef, layout on each selection
                 var layout = (node === null || node === void 0 || (_node$attrs2 = node.attrs) === null || _node$attrs2 === void 0 ? void 0 : _node$attrs2.layout) || 'center';
+                var isNested = selection.$anchor.depth > 0;
 
-                // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
-                dispatch(setCardLayoutAndDatasourceTableRef({
-                  datasourceTableRef: datasourceTableRef,
-                  layout: layout
-                })(tr));
+                // we want to disable resize button when datasource table is nested by not setting then datasourceTableRef on selection
+                if (!isNested) {
+                  // we use cardAction to set the same meta, hence, we will need to combine both layout+datasourceTableRef in one transaction
+                  dispatch(setCardLayoutAndDatasourceTableRef({
+                    datasourceTableRef: datasourceTableRef,
+                    layout: layout
+                  })(tr));
+                }
               }
             } else {
               if (currentState !== null && currentState !== void 0 && currentState.datasourceTableRef) {
@@ -211,6 +215,9 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
             if (isDatasource) {
               var _node$attrs4;
               if (options.allowDatasource && platform !== 'mobile' && canRenderDatasource(node === null || node === void 0 || (_node$attrs4 = node.attrs) === null || _node$attrs4 === void 0 || (_node$attrs4 = _node$attrs4.datasource) === null || _node$attrs4 === void 0 ? void 0 : _node$attrs4.id)) {
+                var datasourcePosition = typeof getPos === 'function' && getPos();
+                var datasourceResolvedPosition = datasourcePosition && view.state.doc.resolve(datasourcePosition);
+                var isNodeNested = !!(datasourceResolvedPosition && datasourceResolvedPosition.depth > 0);
                 return new Datasource({
                   node: node,
                   view: view,
@@ -218,7 +225,8 @@ export var createPlugin = function createPlugin(options, pluginInjectionApi) {
                   portalProviderAPI: portalProviderAPI,
                   eventDispatcher: eventDispatcher,
                   hasIntlContext: hasIntlContext,
-                  pluginInjectionApi: pluginInjectionApi
+                  pluginInjectionApi: pluginInjectionApi,
+                  isNodeNested: isNodeNested
                 }).init();
               } else {
                 return inlineCardViewProducer(node, view, getPos, decorations);

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

@@ -18,6 +18,7 @@ export interface DatasourceProps extends ReactComponentProps {
     eventDispatcher: EventDispatcher;
     hasIntlContext: boolean;
     pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined;
+    isNodeNested?: boolean;
 }
 interface DatasourceComponentProps extends ReactComponentProps, Pick<DatasourceProps, 'node' | 'view' | 'getPos'> {
 }
@@ -39,6 +40,7 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
 }
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
+    private isNodeNested;
     constructor(props: DatasourceProps);
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;

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

@@ -18,6 +18,7 @@ export interface DatasourceProps extends ReactComponentProps {
     eventDispatcher: EventDispatcher;
     hasIntlContext: boolean;
     pluginInjectionApi: ExtractInjectionAPI<typeof cardPlugin> | undefined;
+    isNodeNested?: boolean;
 }
 interface DatasourceComponentProps extends ReactComponentProps, Pick<DatasourceProps, 'node' | 'view' | 'getPos'> {
 }
@@ -39,6 +40,7 @@ export declare class DatasourceComponent extends React.PureComponent<DatasourceC
 }
 export declare class Datasource extends ReactNodeView<DatasourceProps> {
     private tableWidth;
+    private isNodeNested;
     constructor(props: DatasourceProps);
     createDomRef(): HTMLElement;
     render(): jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/editor-plugin-card",
-  "version": "0.14.24",
+  "version": "0.14.25",
   "description": "Card plugin for @atlaskit/editor-core",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
     "@atlaskit/adf-schema": "^35.2.0",
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/custom-steps": "^0.0.10",
-    "@atlaskit/editor-common": "^76.30.0",
+    "@atlaskit/editor-common": "^76.31.0",
     "@atlaskit/editor-plugin-analytics": "^0.4.0",
     "@atlaskit/editor-plugin-decorations": "^0.2.0",
     "@atlaskit/editor-plugin-feature-flags": "^1.0.0",
@@ -50,7 +50,7 @@
     "@atlaskit/link-analytics": "^8.3.0",
     "@atlaskit/link-client-extension": "^1.8.0",
     "@atlaskit/link-datasource": "^1.19.0",
-    "@atlaskit/linking-common": "^5.0.0",
+    "@atlaskit/linking-common": "^5.1.0",
     "@atlaskit/linking-types": "^8.5.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/primitives": "^1.15.0",