@atlaskit/editor-plugin-block-controls 2.27.1 → 2.27.4

package/dist/esm/ui/drag-preview.js

@@ -1,3 +1,4 @@
+import _typeof from "@babel/runtime/helpers/typeof";
 import { browser } from '@atlaskit/editor-common/browser';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, N20, N30 } from '@atlaskit/theme/colors';
@@ -15,14 +16,8 @@ var previewStyleOld = {
   borderWidth: "var(--ds-border-width-outline, 2px)",
   backgroundColor: "var(--ds-blanket-selected, #388BFF14)"
 };
-export var dragPreview = function dragPreview(container, dom, nodeType) {
+var getPreviewContainerDimensionsForSingle = function getPreviewContainerDimensionsForSingle(dom, nodeType) {
   var nodeContainer = dom;
-  container.style.pointerEvents = 'none';
-  var parent = document.createElement('div');
-  // ProseMirror class is required to make sure the cloned dom is styled correctly
-  parent.classList.add('ProseMirror', 'block-ctrl-drag-preview');
-  var embedCard = dom.querySelector('.embedCardView-content-wrap');
-  var shouldBeGenericPreview = nodeType === 'embedCard' || nodeType === 'extension' || !!embedCard;
   if (fg('platform_editor_elements_drag_and_drop_ed_23189')) {
     var iframeContainer = dom.querySelector('iframe');
     if (nodeType === 'embedCard') {
@@ -30,41 +25,94 @@ export var dragPreview = function dragPreview(container, dom, nodeType) {
     } else if (nodeType === 'extension' && iframeContainer) {
       nodeContainer = iframeContainer;
     }
-    shouldBeGenericPreview = nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!iframeContainer;
   }
   var nodeContainerRect = nodeContainer.getBoundingClientRect();
-  container.style.width = "".concat(nodeContainerRect.width, "px");
-  container.style.height = "".concat(nodeContainerRect.height, "px");
+  return {
+    width: nodeContainerRect.width,
+    height: nodeContainerRect.height
+  };
+};
+var getPreviewContainerDimensions = function getPreviewContainerDimensions(dragPreviewContent) {
+  var maxWidth = 0;
+  var heightSum = 0;
+  for (var index = 0; index < dragPreviewContent.length; index++) {
+    var element = dragPreviewContent[index];
+    var _getPreviewContainerD = getPreviewContainerDimensionsForSingle(element.dom, element.nodeType),
+      width = _getPreviewContainerD.width,
+      height = _getPreviewContainerD.height;
+    if (width > maxWidth) {
+      maxWidth = width;
+    }
+    heightSum += height;
+  }
+  return {
+    width: maxWidth,
+    height: heightSum
+  };
+};
+var createGenericPreview = function createGenericPreview() {
+  var generalPreview = document.createElement('div');
+  // ProseMirror class is required to make sure the cloned dom is styled correctly
+  generalPreview.classList.add('ProseMirror', 'block-ctrl-drag-preview');
   var previewStyle = fg('platform_editor_elements_drag_and_drop_ed_23189') ? previewStyleNew : previewStyleOld;
+  generalPreview.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
+  generalPreview.style.borderRadius = previewStyle.borderRadius;
+  generalPreview.style.backgroundColor = previewStyle.backgroundColor;
+  generalPreview.style.height = '100%';
+  generalPreview.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+  return generalPreview;
+};
+var createContentPreviewElement = function createContentPreviewElement(dom, nodeType, nodeSpacing) {
+  var contentPreviewOneElement = document.createElement('div');
+  contentPreviewOneElement.classList.add('ProseMirror', 'block-ctrl-drag-preview');
+  var resizer = dom.querySelector('.resizer-item');
+  var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ?
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  resizer.cloneNode(true) :
+  // Ignored via go/ees005
+  // eslint-disable-next-line @atlaskit/editor/no-as-casting
+  dom.cloneNode(true);
+  clonedDom.style.marginLeft = '0';
+  clonedDom.style.marginTop = nodeSpacing ? "".concat(nodeSpacing.top) : '0';
+  clonedDom.style.marginRight = '0';
+  clonedDom.style.marginBottom = nodeSpacing ? "".concat(nodeSpacing.bottom) : '0';
+  clonedDom.style.boxShadow = 'none';
+  clonedDom.style.opacity = browser.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
+  contentPreviewOneElement.appendChild(clonedDom);
+  return contentPreviewOneElement;
+};
+var isGenericPreview = function isGenericPreview(dom, nodeType) {
+  var embedCard = dom.querySelector('.embedCardView-content-wrap');
+  return fg('platform_editor_elements_drag_and_drop_ed_23189') ? nodeType === 'embedCard' || !!embedCard || nodeType === 'extension' && !!dom.querySelector('iframe') : nodeType === 'embedCard' || !!embedCard || nodeType === 'extension';
+};
+var createPreviewForElement = function createPreviewForElement(dom, nodeType, nodeSpacing) {
+  var shouldBeGenericPreview = isGenericPreview(dom, nodeType);
   if (shouldBeGenericPreview) {
-    parent.style.border = "".concat(previewStyle.borderWidth, " ").concat(previewStyle.borderStyle, " ").concat(previewStyle.borderColor);
-    parent.style.borderRadius = previewStyle.borderRadius;
-    parent.style.backgroundColor = previewStyle.backgroundColor;
-    parent.style.height = '100%';
-    parent.setAttribute('data-testid', 'block-ctrl-generic-drag-preview');
+    return createGenericPreview();
   } else {
-    var resizer = dom.querySelector('.resizer-item');
-    var clonedDom = resizer && ['mediaSingle', 'table'].includes(nodeType) ?
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    resizer.cloneNode(true) :
-    // Ignored via go/ees005
-    // eslint-disable-next-line @atlaskit/editor/no-as-casting
-    dom.cloneNode(true);
-
-    // Remove any margin from the cloned element to ensure is doesn't position incorrectly
-    clonedDom.style.marginLeft = '0';
-    clonedDom.style.marginTop = '0';
-    clonedDom.style.marginRight = '0';
-    clonedDom.style.marginBottom = '0';
-    clonedDom.style.boxShadow = 'none';
-    clonedDom.style.opacity = browser.windows ? '1' : fg('platform_editor_elements_drag_and_drop_ed_23189') ? '0.31' : '0.4';
-    parent.appendChild(clonedDom);
+    return createContentPreviewElement(dom, nodeType, nodeSpacing);
+  }
+};
+export var dragPreview = function dragPreview(container, dragPreviewContent) {
+  container.style.pointerEvents = 'none';
+  if (!Array.isArray(dragPreviewContent) && _typeof(dragPreviewContent) === 'object') {
+    dragPreviewContent = [dragPreviewContent];
+  }
+  var _getPreviewContainerD2 = getPreviewContainerDimensions(dragPreviewContent),
+    maxWidth = _getPreviewContainerD2.width,
+    maxHeight = _getPreviewContainerD2.height;
+  container.style.width = "".concat(maxWidth, "px");
+  container.style.height = "".concat(maxHeight, "px");
+  var previewWrapperFragment = document.createDocumentFragment();
+  for (var index = 0; index < dragPreviewContent.length; index++) {
+    var element = dragPreviewContent[index];
+    var contentPreviewOneElement = createPreviewForElement(element.dom, element.nodeType, element.nodeSpacing);
+    previewWrapperFragment.appendChild(contentPreviewOneElement);
   }
-  container.appendChild(parent);
+  container.appendChild(previewWrapperFragment);
   var scrollParent = document.querySelector('.fabric-editor-popup-scroll-parent');
   var scrollParentClassNames = scrollParent === null || scrollParent === void 0 ? void 0 : scrollParent.className;
-
   // Add the scroll parent class to the container to ensure the cloned element is styled correctly
   container.className = scrollParentClassNames || '';
   container.classList.remove('fabric-editor-popup-scroll-parent');

package/dist/types/blockControlsPluginType.d.ts

@@ -86,6 +86,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        toggleBlockMenu: (options?: {
+            closeMenu?: boolean;
+        }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };

package/dist/types/pm-plugins/utils/getSelection.d.ts

@@ -1,10 +1,10 @@
 import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => TextSelection | NodeSelection;
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**

package/dist/types/ui/block-menu-items.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const getBlockMenuItems: (formatMessage: IntlShape['formatMessage']) => {
+    items: MenuItem[];
+}[];
+export declare const menuItemsCallback: {
+    moveUp: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    moveDown: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    copy: () => void;
+    delete: () => void;
+};

package/dist/types/ui/block-menu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type BlockMenuProps = {
+    editorView: EditorView | undefined;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+};
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types/ui/consts.d.ts

@@ -29,6 +29,12 @@ export declare const dropTargetMarginMap: {
 export declare const spaceLookupMap: {
     [k: string]: string;
 };
+export declare const spacingBetweenNodesForPreview: {
+    [key: string]: {
+        top: string;
+        bottom: string;
+    };
+};
 export declare const nodeMargins: {
     [key: string]: {
         top: number;
@@ -38,3 +44,4 @@ export declare const nodeMargins: {
 export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
+export declare const BLOCK_MENU_WIDTH = 220;

package/dist/types/ui/drag-preview.d.ts

@@ -1 +1,9 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
+export type DragPreviewContent = {
+    dom: HTMLElement;
+    nodeType: string;
+    nodeSpacing?: {
+        top: string;
+        bottom: string;
+    };
+};
+export declare const dragPreview: (container: HTMLElement, dragPreviewContent: DragPreviewContent | DragPreviewContent[]) => () => HTMLElement;

package/dist/types-ts4.5/blockControlsPluginType.d.ts

@@ -86,6 +86,9 @@ export type BlockControlsPlugin = NextEditorPlugin<'blockControls', {
         }) => EditorCommand;
         moveNode: MoveNode;
         showDragHandleAt: (pos: number, anchorName: string, nodeType: string, handleOptions?: HandleOptions) => EditorCommand;
+        toggleBlockMenu: (options?: {
+            closeMenu?: boolean;
+        }) => EditorCommand;
         setNodeDragged: (getPos: () => number | undefined, anchorName: string, nodeType: string) => EditorCommand;
         setMultiSelectPositions: (anchor?: number, head?: number) => EditorCommand;
     };

package/dist/types-ts4.5/pm-plugins/utils/getSelection.d.ts

@@ -1,10 +1,10 @@
 import { ResolvedPos } from '@atlaskit/editor-prosemirror/model';
-import { EditorState, NodeSelection, Selection, TextSelection, type Transaction } from '@atlaskit/editor-prosemirror/state';
+import { EditorState, NodeSelection, TextSelection, type Transaction, Selection } from '@atlaskit/editor-prosemirror/state';
 export declare const getInlineNodePos: (tr: Transaction, start: number, nodeSize: number) => {
     inlineNodePos: number;
     inlineNodeEndPos: number;
 };
-export declare const getSelection: (tr: Transaction, start: number) => TextSelection | NodeSelection;
+export declare const getSelection: (tr: Transaction, start: number) => NodeSelection | TextSelection;
 export declare const selectNode: (tr: Transaction, start: number, nodeType: string) => Transaction;
 export declare const setCursorPositionAtMovedNode: (tr: Transaction, start: number) => Transaction;
 /**

package/dist/types-ts4.5/ui/block-menu-items.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import type { IntlShape } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import type { MenuItem } from '@atlaskit/editor-common/ui-menu';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+export declare const getBlockMenuItems: (formatMessage: IntlShape['formatMessage']) => {
+    items: MenuItem[];
+}[];
+export declare const menuItemsCallback: {
+    moveUp: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    moveDown: (api: ExtractInjectionAPI<BlockControlsPlugin> | undefined, formatMessage: IntlShape['formatMessage']) => import("@atlaskit/editor-common/types").Command;
+    copy: () => void;
+    delete: () => void;
+};

package/dist/types-ts4.5/ui/block-menu.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { WrappedComponentProps } from 'react-intl-next';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+import { EditorView } from '@atlaskit/editor-prosemirror/dist/types/view';
+import type { BlockControlsPlugin } from '../blockControlsPluginType';
+type BlockMenuProps = {
+    editorView: EditorView | undefined;
+    mountPoint?: HTMLElement;
+    boundariesElement?: HTMLElement;
+    scrollableElement?: HTMLElement;
+    api: ExtractInjectionAPI<BlockControlsPlugin> | undefined;
+};
+declare const _default: React.FC<import("react-intl-next").WithIntlProps<BlockMenuProps & WrappedComponentProps>> & {
+    WrappedComponent: React.ComponentType<BlockMenuProps & WrappedComponentProps>;
+};
+export default _default;

package/dist/types-ts4.5/ui/consts.d.ts

@@ -29,6 +29,12 @@ export declare const dropTargetMarginMap: {
 export declare const spaceLookupMap: {
     [k: string]: string;
 };
+export declare const spacingBetweenNodesForPreview: {
+    [key: string]: {
+        top: string;
+        bottom: string;
+    };
+};
 export declare const nodeMargins: {
     [key: string]: {
         top: number;
@@ -38,3 +44,4 @@ export declare const nodeMargins: {
 export declare const DEFAULT_COLUMN_DISTRIBUTIONS: {
     [key: number]: number;
 };
+export declare const BLOCK_MENU_WIDTH = 220;

package/dist/types-ts4.5/ui/drag-preview.d.ts

@@ -1 +1,9 @@
-export declare const dragPreview: (container: HTMLElement, dom: HTMLElement, nodeType: string) => () => HTMLElement;
+export type DragPreviewContent = {
+    dom: HTMLElement;
+    nodeType: string;
+    nodeSpacing?: {
+        top: string;
+        bottom: string;
+    };
+};
+export declare const dragPreview: (container: HTMLElement, dragPreviewContent: DragPreviewContent | DragPreviewContent[]) => () => HTMLElement;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "2.27.1",
+	"version": "2.27.4",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/adf-schema": "^47.2.1",
-		"@atlaskit/editor-common": "^99.16.0",
+		"@atlaskit/editor-common": "^99.17.0",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.4.0",
 		"@atlaskit/editor-plugin-analytics": "^1.12.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^1.5.0",
@@ -40,15 +40,15 @@
 		"@atlaskit/editor-plugin-selection": "^1.8.0",
 		"@atlaskit/editor-plugin-width": "^2.1.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
-		"@atlaskit/editor-shared-styles": "^3.2.0",
+		"@atlaskit/editor-shared-styles": "^3.3.0",
 		"@atlaskit/editor-tables": "^2.9.0",
 		"@atlaskit/icon": "^23.9.0",
-		"@atlaskit/platform-feature-flags": "^1.0.0",
+		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
 		"@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^1.2.0",
 		"@atlaskit/primitives": "^13.5.0",
-		"@atlaskit/theme": "^15.0.0",
+		"@atlaskit/theme": "^16.0.0",
 		"@atlaskit/tmp-editor-statsig": "^2.46.0",
 		"@atlaskit/tokens": "^3.3.0",
 		"@atlaskit/tooltip": "^19.1.0",