@atlaskit/editor-plugin-block-controls 6.1.1 → 6.3.0

package/dist/esm/ui/inline-drop-target.js

@@ -14,6 +14,7 @@ import { akEditorBreakoutPadding } from '@atlaskit/editor-shared-styles';
 import { DropIndicator } from '@atlaskit/pragmatic-drag-and-drop-react-drop-indicator/box';
 import { dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { B200 } from '@atlaskit/theme/colors';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { getNodeAnchor } from '../pm-plugins/decorations-common';
 import { useActiveAnchorTracker } from '../pm-plugins/utils/active-anchor-tracker';
 import { isAnchorSupported } from '../pm-plugins/utils/anchor-utils';
@@ -92,8 +93,11 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     isDraggedOver = _useState2[0],
     setIsDraggedOver = _useState2[1];
   var anchorName = useMemo(function () {
+    if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+      return nextNode ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode, getPos() || -1)) || '' : '';
+    }
     return nextNode ? getNodeAnchor(nextNode) : '';
-  }, [nextNode]);
+  }, [api, getPos, nextNode]);
   var _useActiveAnchorTrack = useActiveAnchorTracker(anchorName),
     _useActiveAnchorTrack2 = _slicedToArray(_useActiveAnchorTrack, 1),
     isActiveAnchor = _useActiveAnchorTrack2[0];
@@ -102,6 +106,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
     if (!nextNode) {
       return defaultNodeDimension;
     }
+    var nextNodePos = getPos();
     var innerContainerWidth = null;
     var targetAnchorName = anchorName;
     if (['blockCard', 'embedCard', 'extension'].includes(nextNode.type.name)) {
@@ -120,7 +125,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
         innerContainerWidth = "calc(var(--ak-editor--line-length) * ".concat(percentageWidth, ")");
       }
     } else if (nextNode.type.name === 'table' && nextNode.firstChild) {
-      var tableWidthAnchor = getNodeAnchor(nextNode.firstChild);
+      var tableWidthAnchor = expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? typeof nextNodePos === 'number' ? (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '' : '' : getNodeAnchor(nextNode.firstChild);
       var isNumberColumnEnabled = Boolean(nextNode.attrs.isNumberColumnEnabled);
       if (isAnchorSupported()) {
         innerContainerWidth = isNumberColumnEnabled ? "calc(anchor-size(".concat(tableWidthAnchor, " width) + ").concat(TABLE_NUMBERED_COLUMN_WIDTH, "px)") : "anchor-size(".concat(tableWidthAnchor, " width)");
@@ -133,13 +138,42 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
         innerContainerWidth = "min(".concat(nextNode.attrs.width, "px, ").concat(innerContainerWidth, ")");
       }
     } else if (nextNode.type.name === 'mediaSingle' && nextNode.firstChild) {
-      targetAnchorName = getNodeAnchor(nextNode.firstChild);
+      if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+        var _nextNode$firstChild;
+        // check pos is a number
+        if (typeof nextNodePos === 'number' && ((_nextNode$firstChild = nextNode.firstChild) === null || _nextNode$firstChild === void 0 ? void 0 : _nextNode$firstChild.type.name) === 'media') {
+          targetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
+        }
+      } else {
+        targetAnchorName = getNodeAnchor(nextNode.firstChild);
+      }
     }
 
     // Set the height target anchor name to the first or last column of the layout section so that it also works for stacked layout
     var heightTargetAnchorName = targetAnchorName;
     if (nextNode.type.name === 'layoutSection' && nextNode.firstChild && nextNode.lastChild) {
-      heightTargetAnchorName = isLeftPosition ? getNodeAnchor(nextNode.firstChild) : getNodeAnchor(nextNode.lastChild);
+      if (isLeftPosition) {
+        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+          if (typeof nextNodePos === 'number') {
+            heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.firstChild, nextNodePos + 1)) || '';
+          } else {
+            heightTargetAnchorName = '';
+          }
+        } else {
+          heightTargetAnchorName = getNodeAnchor(nextNode.firstChild);
+        }
+      } else {
+        if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+          if (typeof nextNodePos === 'number') {
+            var lastNodeStartPos = nextNode.content.size - nextNode.lastChild.nodeSize;
+            heightTargetAnchorName = (api === null || api === void 0 ? void 0 : api.core.actions.getAnchorIdForNode(nextNode.lastChild, lastNodeStartPos + 1)) || '';
+          } else {
+            heightTargetAnchorName = '';
+          }
+        } else {
+          heightTargetAnchorName = getNodeAnchor(nextNode.lastChild);
+        }
+      }
     }
     if (isAnchorSupported()) {
       var width = innerContainerWidth || "anchor-size(".concat(targetAnchorName, " width)");
@@ -171,7 +205,7 @@ export var InlineDropTarget = function InlineDropTarget(_ref) {
       };
     }
     return defaultNodeDimension;
-  }, [anchorName, anchorRectCache, nextNode, position, isLeftPosition]);
+  }, [nextNode, anchorName, anchorRectCache, getPos, api, isLeftPosition, position]);
   var onDrop = useCallback(function () {
     var _api$blockControls;
     var _ref2 = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},

package/dist/esm/ui/quick-insert-button.js

@@ -25,9 +25,10 @@ import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
-import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
+import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET, rootElementGap, topPositionAdjustment } from './consts';
 import { refreshAnchorName } from './utils/anchor-name';
 import { isInTextSelection, isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
+import { getAnchorAttrName } from './utils/dom-attr-name';
 import { createNewLine } from './utils/editor-commands';
 import { VisibilityContainer } from './visibility-container';
 var TEXT_PARENT_TYPES = ['paragraph', 'heading', 'blockquote', 'taskItem', 'decisionItem'];
@@ -116,7 +117,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
       view: view,
       anchorName: rootAnchorName
     });
-    var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(safeAnchorName, "\"]"));
+    var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(safeAnchorName, "\"]"));
     var hasResizer = rootNodeType === 'table' || rootNodeType === 'mediaSingle';
     var isExtension = rootNodeType === 'extension' || rootNodeType === 'bodiedExtension';
     var isBlockCard = rootNodeType === 'blockCard';
@@ -156,7 +157,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
   useEffect(function () {
     var cleanUpTransitionListener;
     if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
-      var dom = view.dom.querySelector("[data-drag-handler-anchor-name=\"".concat(rootAnchorName, "\"]"));
+      var dom = view.dom.querySelector("[".concat(getAnchorAttrName(), "=\"").concat(rootAnchorName, "\"]"));
       if (!dom) {
         return;
       }

package/dist/esm/ui/utils/anchor-name.js

@@ -1,3 +1,4 @@
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import { findNodeDecs } from '../../pm-plugins/decorations-anchor';
 import { key } from '../../pm-plugins/main';
 /**
@@ -9,6 +10,9 @@ export var refreshAnchorName = function refreshAnchorName(_ref) {
     view = _ref.view,
     anchorName = _ref.anchorName;
   var newAnchorName = anchorName || '';
+  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return newAnchorName;
+  }
   var pos = getPos();
   if (anchorName || pos === undefined) {
     return newAnchorName;

package/dist/esm/ui/utils/dom-attr-name.js

@@ -0,0 +1,47 @@
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+export var NODE_ANCHOR_ATTR_NAME = 'data-node-anchor';
+export var NODE_NODE_TYPE_ATTR_NAME = 'data-prosemirror-node-name';
+export var getAnchorAttrName = function getAnchorAttrName() {
+  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return NODE_ANCHOR_ATTR_NAME;
+  }
+  return 'data-drag-handler-anchor-name';
+};
+export var getTypeNameAttrName = function getTypeNameAttrName() {
+  if (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true)) {
+    return NODE_NODE_TYPE_ATTR_NAME;
+  }
+  return 'data-drag-handler-node-type';
+};
+var isHeadingElement = function isHeadingElement(element) {
+  var headingTags = ['H1', 'H2', 'H3', 'H4', 'H5', 'H6'];
+  return headingTags.includes(element.tagName);
+};
+
+// This function replicates the behavior of getNodeTypeWithLevel by returning the same value.
+export var getTypeNameFromDom = function getTypeNameFromDom(element) {
+  if (!element) {
+    return '';
+  }
+  var nodeType = element === null || element === void 0 ? void 0 : element.getAttribute(NODE_NODE_TYPE_ATTR_NAME);
+  if (!nodeType) {
+    return '';
+  }
+  if (isHeadingElement(element)) {
+    switch (element.tagName) {
+      case 'H1':
+        return 'heading-1';
+      case 'H2':
+        return 'heading-2';
+      case 'H3':
+        return 'heading-3';
+      case 'H4':
+        return 'heading-4';
+      case 'H5':
+        return 'heading-5';
+      case 'H6':
+        return 'heading-6';
+    }
+  }
+  return nodeType;
+};

package/dist/types/pm-plugins/decorations-anchor.d.ts

@@ -1,6 +1,8 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const IGNORE_NODES_NEXT: string[];
+export declare const IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT: string[];
 export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
 /**
  * Find node decorations corresponding to nodes with starting position between from and to (non-inclusive)

package/dist/types/ui/utils/dom-attr-name.d.ts

@@ -0,0 +1,5 @@
+export declare const NODE_ANCHOR_ATTR_NAME = "data-node-anchor";
+export declare const NODE_NODE_TYPE_ATTR_NAME = "data-prosemirror-node-name";
+export declare const getAnchorAttrName: () => "data-node-anchor" | "data-drag-handler-anchor-name";
+export declare const getTypeNameAttrName: () => "data-prosemirror-node-name" | "data-drag-handler-node-type";
+export declare const getTypeNameFromDom: (element?: Element | null) => string;

package/dist/types-ts4.5/pm-plugins/decorations-anchor.d.ts

@@ -1,6 +1,8 @@
 import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import { Decoration, type DecorationSet } from '@atlaskit/editor-prosemirror/view';
+export declare const IGNORE_NODES_NEXT: string[];
+export declare const IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT: string[];
 export declare const shouldDescendIntoNode: (node: PMNode) => boolean;
 /**
  * Find node decorations corresponding to nodes with starting position between from and to (non-inclusive)

package/dist/types-ts4.5/ui/utils/dom-attr-name.d.ts

@@ -0,0 +1,5 @@
+export declare const NODE_ANCHOR_ATTR_NAME = "data-node-anchor";
+export declare const NODE_NODE_TYPE_ATTR_NAME = "data-prosemirror-node-name";
+export declare const getAnchorAttrName: () => "data-node-anchor" | "data-drag-handler-anchor-name";
+export declare const getTypeNameAttrName: () => "data-prosemirror-node-name" | "data-drag-handler-node-type";
+export declare const getTypeNameFromDom: (element?: Element | null) => string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "6.1.1",
+	"version": "6.3.0",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -28,23 +28,23 @@
 	],
 	"atlaskit:src": "src/index.ts",
 	"dependencies": {
-		"@atlaskit/adf-schema": "^51.1.1",
+		"@atlaskit/adf-schema": "^51.1.2",
 		"@atlaskit/editor-plugin-accessibility-utils": "^5.0.0",
-		"@atlaskit/editor-plugin-analytics": "^5.1.0",
+		"@atlaskit/editor-plugin-analytics": "^5.2.0",
 		"@atlaskit/editor-plugin-editor-disabled": "^5.0.0",
 		"@atlaskit/editor-plugin-feature-flags": "^4.0.0",
 		"@atlaskit/editor-plugin-interaction": "^7.0.0",
 		"@atlaskit/editor-plugin-limited-mode": "^2.0.0",
-		"@atlaskit/editor-plugin-metrics": "^6.1.0",
+		"@atlaskit/editor-plugin-metrics": "^6.2.0",
 		"@atlaskit/editor-plugin-quick-insert": "^5.0.0",
 		"@atlaskit/editor-plugin-selection": "^5.0.0",
-		"@atlaskit/editor-plugin-type-ahead": "^5.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^5.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^3.0.0",
 		"@atlaskit/editor-plugin-width": "^6.0.0",
 		"@atlaskit/editor-prosemirror": "7.0.0",
 		"@atlaskit/editor-shared-styles": "^3.6.0",
 		"@atlaskit/editor-tables": "^2.9.0",
-		"@atlaskit/icon": "^28.1.0",
+		"@atlaskit/icon": "^28.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
@@ -52,7 +52,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^14.14.0",
 		"@atlaskit/theme": "^21.0.0",
-		"@atlaskit/tmp-editor-statsig": "^12.17.0",
+		"@atlaskit/tmp-editor-statsig": "^12.22.0",
 		"@atlaskit/tokens": "^6.3.0",
 		"@atlaskit/tooltip": "^20.4.0",
 		"@babel/runtime": "^7.0.0",
@@ -64,7 +64,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^109.3.0",
+		"@atlaskit/editor-common": "^109.7.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"