@atlaskit/editor-plugin-block-menu 5.2.16 → 5.2.17

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/editor-plugin-block-menu
 
+## 5.2.17
+
+### Patch Changes
+
+- [`1da3868c8f709`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1da3868c8f709) -
+  EDITOR-3916 Fix block menu alternating on drag handle click
+- [`722f272e8b78f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/722f272e8b78f) -
+  Editor-2778: Smartlink card and embed transform
+- Updated dependencies
+
 ## 5.2.16
 
 ### Patch Changes

package/dist/cjs/editor-commands/transform-node-utils/transform.js

@@ -129,6 +129,12 @@ var TRANSFORM_STEPS_OVERRIDE = {
     orderedList: [_decisionListToListStep.decisionListToListStep],
     taskList: [_decisionListToListStep.decisionListToListStep],
     layoutSection: [_wrapIntoLayoutStep.wrapIntoLayoutStep]
+  },
+  blockCard: {
+    layoutSection: [_wrapIntoLayoutStep.wrapIntoLayoutStep]
+  },
+  embedCard: {
+    layoutSection: [_wrapIntoLayoutStep.wrapIntoLayoutStep]
   }
 };
 var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {

package/dist/cjs/editor-commands/transformNode.js

@@ -26,8 +26,9 @@ var transformNode = exports.transformNode = function transformNode(api) {
         var _expandSelectionToBlo = (0, _selection.expandSelectionToBlockRange)(preservedSelection),
           $from = _expandSelectionToBlo.$from,
           $to = _expandSelectionToBlo.$to;
-        var isNested = (0, _isNestedNode.isNestedNode)(preservedSelection, '');
         var selectedParent = $from.parent;
+        var isParentLayout = selectedParent.type === nodes.layoutColumn;
+        var isNestedExceptLayout = (0, _isNestedNode.isNestedNode)(preservedSelection, '') && !isParentLayout;
         var fragment = _model.Fragment.empty;
         var isList = (0, _utils.isListNode)(selectedParent);
         var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
@@ -36,7 +37,7 @@ var transformNode = exports.transformNode = function transformNode(api) {
             sourceNode: node,
             targetNodeType: targetType,
             schema: tr.doc.type.schema,
-            isNested: isNested
+            isNested: isNestedExceptLayout
           });
           if (outputNode) {
             fragment = fragment.append(_model.Fragment.fromArray(outputNode));

package/dist/cjs/ui/block-menu.js

@@ -127,7 +127,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
   })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
-  var _editorView$dom, _ref5;
+  var _editorView$dom, _ref5, _api$analytics3;
   var editorView = _ref4.editorView,
     api = _ref4.api,
     mountTo = _ref4.mountTo,
@@ -202,6 +202,13 @@ var BlockMenu = function BlockMenu(_ref4) {
       return tr;
     });
   };
+  var handleClickOutside = function handleClickOutside(e) {
+    // check if the clicked element was another drag handle, if so don't close the menu
+    if (e.target instanceof HTMLElement && e.target.closest(_styles.DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
+    closeMenu();
+  };
   var closeMenu = function closeMenu() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls3, _api$userIntent3;
@@ -227,39 +234,37 @@ var BlockMenu = function BlockMenu(_ref4) {
       popupRef.current = el;
     }
   };
-  if (targetHandleRef instanceof HTMLElement) {
-    var _api$analytics3;
-    return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
-      component: _analytics.ACTION_SUBJECT.BLOCK_MENU,
-      dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
-      fallbackComponent: null
-    }, /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
-      alignX: 'right',
-      alignY: 'start',
-      handleClickOutside: closeMenu,
-      handleEscapeKeydown: closeMenu,
-      handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      target: targetHandleRef,
-      zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
-      fitWidth: DEFAULT_MENU_WIDTH,
-      fitHeight: menuHeight,
-      preventOverflow: true,
-      stick: true,
-      offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
-      focusTrap: openedViaKeyboard ?
-      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
-      {
-        initialFocus: undefined
-      } : undefined
-    }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
-      api: api,
-      setRef: setRef
-    })));
-  } else {
+  if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  return /*#__PURE__*/_react.default.createElement(_errorBoundary.ErrorBoundary, {
+    component: _analytics.ACTION_SUBJECT.BLOCK_MENU,
+    dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/_react.default.createElement(PopupWithListeners, {
+    alignX: 'right',
+    alignY: 'start',
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: closeMenu,
+    handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetHandleRef,
+    zIndex: _editorSharedStyles.akEditorFloatingOverlapPanelZIndex,
+    fitWidth: DEFAULT_MENU_WIDTH,
+    fitHeight: menuHeight,
+    preventOverflow: true,
+    stick: true,
+    offset: [_styles.DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
+    focusTrap: openedViaKeyboard ?
+    // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+    {
+      initialFocus: undefined
+    } : undefined
+  }, /*#__PURE__*/_react.default.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  })));
 };
 var _default = exports.default = (0, _reactIntlNext.injectIntl)(BlockMenu);

package/dist/es2019/editor-commands/transform-node-utils/transform.js

@@ -124,6 +124,12 @@ const TRANSFORM_STEPS_OVERRIDE = {
     orderedList: [decisionListToListStep],
     taskList: [decisionListToListStep],
     layoutSection: [wrapIntoLayoutStep]
+  },
+  blockCard: {
+    layoutSection: [wrapIntoLayoutStep]
+  },
+  embedCard: {
+    layoutSection: [wrapIntoLayoutStep]
   }
 };
 const getTransformStepsForNodeTypes = (selectedNodeTypeName, targetNodeTypeName) => {

package/dist/es2019/editor-commands/transformNode.js

@@ -23,8 +23,9 @@ export const transformNode = api =>
       $from,
       $to
     } = expandSelectionToBlockRange(preservedSelection);
-    const isNested = isNestedNode(preservedSelection, '');
     const selectedParent = $from.parent;
+    const isParentLayout = selectedParent.type === nodes.layoutColumn;
+    const isNestedExceptLayout = isNestedNode(preservedSelection, '') && !isParentLayout;
     let fragment = Fragment.empty;
     const isList = isListNode(selectedParent);
     const slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
@@ -33,7 +34,7 @@ export const transformNode = api =>
         sourceNode: node,
         targetNodeType: targetType,
         schema: tr.doc.type.schema,
-        isNested
+        isNested: isNestedExceptLayout
       });
       if (outputNode) {
         fragment = fragment.append(Fragment.fromArray(outputNode));

package/dist/es2019/ui/block-menu.js

@@ -124,7 +124,7 @@ const BlockMenu = ({
   boundariesElement,
   scrollableElement
 }) => {
-  var _editorView$dom, _ref;
+  var _editorView$dom, _ref, _api$analytics3;
   const {
     menuTriggerBy,
     isSelectedViaDragHandle,
@@ -194,6 +194,13 @@ const BlockMenu = ({
       return tr;
     });
   };
+  const handleClickOutside = e => {
+    // check if the clicked element was another drag handle, if so don't close the menu
+    if (e.target instanceof HTMLElement && e.target.closest(DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
+    closeMenu();
+  };
   const closeMenu = () => {
     api === null || api === void 0 ? void 0 : api.core.actions.execute(({
       tr
@@ -220,39 +227,37 @@ const BlockMenu = ({
       popupRef.current = el;
     }
   };
-  if (targetHandleRef instanceof HTMLElement) {
-    var _api$analytics3;
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
-      component: ACTION_SUBJECT.BLOCK_MENU,
-      dispatchAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
-      fallbackComponent: null
-    }, /*#__PURE__*/React.createElement(PopupWithListeners, {
-      alignX: 'right',
-      alignY: 'start',
-      handleClickOutside: closeMenu,
-      handleEscapeKeydown: closeMenu,
-      handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      target: targetHandleRef,
-      zIndex: akEditorFloatingOverlapPanelZIndex,
-      fitWidth: DEFAULT_MENU_WIDTH,
-      fitHeight: menuHeight,
-      preventOverflow: true,
-      stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
-      focusTrap: openedViaKeyboard ?
-      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
-      {
-        initialFocus: undefined
-      } : undefined
-    }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-      api: api,
-      setRef: setRef
-    })));
-  } else {
+  if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.BLOCK_MENU,
+    dispatchAnalyticsEvent: api === null || api === void 0 ? void 0 : (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: 'right',
+    alignY: 'start',
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: closeMenu,
+    handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetHandleRef,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    fitWidth: DEFAULT_MENU_WIDTH,
+    fitHeight: menuHeight,
+    preventOverflow: true,
+    stick: true,
+    offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
+    focusTrap: openedViaKeyboard ?
+    // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+    {
+      initialFocus: undefined
+    } : undefined
+  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  })));
 };
 export default injectIntl(BlockMenu);

package/dist/esm/editor-commands/transform-node-utils/transform.js

@@ -124,6 +124,12 @@ var TRANSFORM_STEPS_OVERRIDE = {
     orderedList: [decisionListToListStep],
     taskList: [decisionListToListStep],
     layoutSection: [wrapIntoLayoutStep]
+  },
+  blockCard: {
+    layoutSection: [wrapIntoLayoutStep]
+  },
+  embedCard: {
+    layoutSection: [wrapIntoLayoutStep]
   }
 };
 var getTransformStepsForNodeTypes = function getTransformStepsForNodeTypes(selectedNodeTypeName, targetNodeTypeName) {

package/dist/esm/editor-commands/transformNode.js

@@ -20,8 +20,9 @@ export var transformNode = function transformNode(api) {
         var _expandSelectionToBlo = expandSelectionToBlockRange(preservedSelection),
           $from = _expandSelectionToBlo.$from,
           $to = _expandSelectionToBlo.$to;
-        var isNested = isNestedNode(preservedSelection, '');
         var selectedParent = $from.parent;
+        var isParentLayout = selectedParent.type === nodes.layoutColumn;
+        var isNestedExceptLayout = isNestedNode(preservedSelection, '') && !isParentLayout;
         var fragment = Fragment.empty;
         var isList = isListNode(selectedParent);
         var slice = tr.doc.slice(isList ? $from.pos - 1 : $from.pos, isList ? $to.pos + 1 : $to.pos);
@@ -30,7 +31,7 @@ export var transformNode = function transformNode(api) {
             sourceNode: node,
             targetNodeType: targetType,
             schema: tr.doc.type.schema,
-            isNested: isNested
+            isNested: isNestedExceptLayout
           });
           if (outputNode) {
             fragment = fragment.append(Fragment.fromArray(outputNode));

package/dist/esm/ui/block-menu.js

@@ -118,7 +118,7 @@ var BlockMenuContent = function BlockMenuContent(_ref3) {
   })));
 };
 var BlockMenu = function BlockMenu(_ref4) {
-  var _editorView$dom, _ref5;
+  var _editorView$dom, _ref5, _api$analytics3;
   var editorView = _ref4.editorView,
     api = _ref4.api,
     mountTo = _ref4.mountTo,
@@ -193,6 +193,13 @@ var BlockMenu = function BlockMenu(_ref4) {
       return tr;
     });
   };
+  var handleClickOutside = function handleClickOutside(e) {
+    // check if the clicked element was another drag handle, if so don't close the menu
+    if (e.target instanceof HTMLElement && e.target.closest(DRAG_HANDLE_SELECTOR)) {
+      return;
+    }
+    closeMenu();
+  };
   var closeMenu = function closeMenu() {
     api === null || api === void 0 || api.core.actions.execute(function (_ref7) {
       var _api$blockControls3, _api$userIntent3;
@@ -218,39 +225,37 @@ var BlockMenu = function BlockMenu(_ref4) {
       popupRef.current = el;
     }
   };
-  if (targetHandleRef instanceof HTMLElement) {
-    var _api$analytics3;
-    return /*#__PURE__*/React.createElement(ErrorBoundary, {
-      component: ACTION_SUBJECT.BLOCK_MENU,
-      dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
-      fallbackComponent: null
-    }, /*#__PURE__*/React.createElement(PopupWithListeners, {
-      alignX: 'right',
-      alignY: 'start',
-      handleClickOutside: closeMenu,
-      handleEscapeKeydown: closeMenu,
-      handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
-      mountTo: mountTo,
-      boundariesElement: boundariesElement,
-      scrollableElement: scrollableElement,
-      target: targetHandleRef,
-      zIndex: akEditorFloatingOverlapPanelZIndex,
-      fitWidth: DEFAULT_MENU_WIDTH,
-      fitHeight: menuHeight,
-      preventOverflow: true,
-      stick: true,
-      offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
-      focusTrap: openedViaKeyboard ?
-      // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
-      {
-        initialFocus: undefined
-      } : undefined
-    }, /*#__PURE__*/React.createElement(BlockMenuContent, {
-      api: api,
-      setRef: setRef
-    })));
-  } else {
+  if (!(targetHandleRef instanceof HTMLElement)) {
     return null;
   }
+  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+    component: ACTION_SUBJECT.BLOCK_MENU,
+    dispatchAnalyticsEvent: api === null || api === void 0 || (_api$analytics3 = api.analytics) === null || _api$analytics3 === void 0 ? void 0 : _api$analytics3.actions.fireAnalyticsEvent,
+    fallbackComponent: null
+  }, /*#__PURE__*/React.createElement(PopupWithListeners, {
+    alignX: 'right',
+    alignY: 'start',
+    handleClickOutside: handleClickOutside,
+    handleEscapeKeydown: closeMenu,
+    handleBackspaceDeleteKeydown: handleBackspaceDeleteKeydown,
+    mountTo: mountTo,
+    boundariesElement: boundariesElement,
+    scrollableElement: scrollableElement,
+    target: targetHandleRef,
+    zIndex: akEditorFloatingOverlapPanelZIndex,
+    fitWidth: DEFAULT_MENU_WIDTH,
+    fitHeight: menuHeight,
+    preventOverflow: true,
+    stick: true,
+    offset: [DRAG_HANDLE_WIDTH + DRAG_HANDLE_OFFSET_PADDING, targetHandleHeightOffset],
+    focusTrap: openedViaKeyboard ?
+    // Only enable focus trap when opened via keyboard to make sure the focus is on the first focusable menu item
+    {
+      initialFocus: undefined
+    } : undefined
+  }, /*#__PURE__*/React.createElement(BlockMenuContent, {
+    api: api,
+    setRef: setRef
+  })));
 };
 export default injectIntl(BlockMenu);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-menu",
-	"version": "5.2.16",
+	"version": "5.2.17",
 	"description": "BlockMenu plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -44,7 +44,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/platform-feature-flags-react": "^0.4.0",
 		"@atlaskit/primitives": "^16.4.0",
-		"@atlaskit/tmp-editor-statsig": "^15.13.0",
+		"@atlaskit/tmp-editor-statsig": "^15.16.0",
 		"@atlaskit/tokens": "^8.6.0",
 		"@babel/runtime": "^7.0.0"
 	},