@atlaskit/editor-plugin-block-controls 9.1.8 → 9.1.10

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 9.1.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.1.9
+
+### Patch Changes
+
+- [`840d3970b9d8c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/840d3970b9d8c) -
+  Fix paragraph spacing in panels for small font-size block marks
+
+  Fix drag handle positioning around small text
+
+  Fix drag handles not appearing on small text in panels
+
+- Updated dependencies
+
 ## 9.1.8
 
 ### Patch Changes

package/dist/cjs/pm-plugins/decorations-common.js

@@ -10,6 +10,8 @@ var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/creat
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _uuid = _interopRequireDefault(require("uuid"));
+var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
+var _validation = require("./utils/validation");
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 
 var TYPE_DROP_TARGET_DEC = exports.TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
@@ -20,8 +22,17 @@ var getNodeAnchor = exports.getNodeAnchor = function getNodeAnchor(node) {
   var handleId = ObjHash.getForNode(node);
   return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
 };
+var getSubType = function getSubType(node) {
+  if (node.attrs.level) {
+    return "-".concat(node.attrs.level);
+  }
+  if ((0, _validation.isFontSizeMarkActive)(node)) {
+    return '-small';
+  }
+  return '';
+};
 var getNodeTypeWithLevel = exports.getNodeTypeWithLevel = function getNodeTypeWithLevel(node) {
-  var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
+  var subType = (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? getSubType(node) : node.attrs.level ? "-".concat(node.attrs.level) : '';
   return node.type.name + subType;
 };
 var ObjHash = /*#__PURE__*/function () {

package/dist/cjs/pm-plugins/handle-mouse-over.js

@@ -44,6 +44,16 @@ var getDefaultNodeSelector = (0, _memoizeOne.default)(function () {
   // we don't show handler for node nested in table
   return getNodeSelector([].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODES_NEXT), ['media']), [].concat((0, _toConsumableArray2.default)(_decorationsAnchor.IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
 });
+
+// Block marks (e.g. font-size) wrap paragraphs in an extra div, making parentRootElement
+// the mark wrapper instead of the panel content container. When that happens, recalculate
+// the index relative to the panel content so the first-child check stays accurate.
+var getBlockMarkPanelIndexAdjustment = function getBlockMarkPanelIndexAdjustment(parentRootElement, index) {
+  if ((0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) && parentRootElement.classList.contains('fabric-editor-block-mark') && parentRootElement.parentElement) {
+    return Array.from(parentRootElement.parentElement.childNodes).indexOf(parentRootElement);
+  }
+  return index;
+};
 var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -164,10 +174,10 @@ var handleMouseOver = exports.handleMouseOver = function handleMouseOver(view, e
       var childNodes = Array.from(parentRootElement.childNodes);
       var index = childNodes.indexOf(rootElement);
       pos = view.posAtDOM(parentRootElement, index);
-
+      var panelIndex = getBlockMarkPanelIndexAdjustment(parentRootElement, index);
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (panelIndex === 0 || firstChildIsWidget && panelIndex === 1)) {
         return false;
       }
     } else {

package/dist/cjs/pm-plugins/utils/drag-handle-positions.js

@@ -32,6 +32,8 @@ var getTopPosition = exports.getTopPosition = function getTopPosition(dom, type)
     return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H5_TOP_ADJUSTMENT, "px");
   } else if (type === 'heading-6') {
     return "".concat(dom.offsetTop - _consts.DRAG_HANDLE_H6_TOP_ADJUSTMENT, "px");
+  } else if (type === 'paragraph-small') {
+    return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, "px");
   } else if (type === 'paragraph') {
     return "".concat(dom.offsetTop + _consts.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, "px");
   } else {

package/dist/cjs/pm-plugins/utils/validation.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.canCreateNodeWithContentInsideAnotherNode = void 0;
 exports.canMoveNodeToIndex = canMoveNodeToIndex;
 exports.canMoveSliceToIndex = canMoveSliceToIndex;
-exports.transformSliceExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isExpand = exports.isDoc = void 0;
+exports.transformSliceExpandToNestedExpand = exports.transformFragmentExpandToNestedExpand = exports.transformExpandToNestedExpand = exports.memoizedTransformExpandToNestedExpand = exports.isNestedExpand = exports.isLayoutColumn = exports.isInsideTable = exports.isInSameLayout = exports.isFontSizeMarkActive = exports.isExpand = exports.isDoc = void 0;
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _nesting = require("@atlaskit/editor-common/nesting");
 var _model = require("@atlaskit/editor-prosemirror/model");
@@ -31,6 +31,11 @@ var isExpand = exports.isExpand = function isExpand(nodeType) {
 var isNestedExpand = exports.isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+var isFontSizeMarkActive = exports.isFontSizeMarkActive = function isFontSizeMarkActive(node) {
+  return node.type.name === 'paragraph' && node.marks.some(function (mark) {
+    return mark.type.name === 'fontSize';
+  });
+};
 var isInSameLayout = exports.isInSameLayout = function isInSameLayout($from, $to) {
   var fromNode = $from.nodeAfter;
   var toNode = $to.nodeAfter;

package/dist/cjs/ui/consts.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
+exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER = exports.STICKY_CONTROLS_TOP_MARGIN = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_SYNCED_BLOCK_GAP = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_NARROW_GAP = exports.DRAG_HANDLE_MAX_WIDTH_PLUS_GAP = exports.DRAG_HANDLE_MAX_SHIFT_CLICK_DEPTH = exports.DRAG_HANDLE_MAX_GAP = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H4_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H3_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H2_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H1_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT = exports.DRAG_HANDLE_DEFAULT_GAP = exports.DRAG_HANDLE_BORDER_RADIUS = exports.DEFAULT_COLUMN_DISTRIBUTIONS = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styles = require("@atlaskit/editor-common/styles");
 var _utils = require("@atlaskit/editor-common/utils");
@@ -28,6 +28,7 @@ var DRAG_HANDLE_H5_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 var DRAG_HANDLE_H6_TOP_ADJUSTMENT = exports.DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = exports.DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = exports.DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -119,6 +120,8 @@ var topPositionAdjustment = exports.topPositionAdjustment = function topPosition
       return DRAG_HANDLE_HEIGHT;
     case 'paragraph':
       return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
+    case 'paragraph-small':
+      return DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT;
     case 'heading-1':
       return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
     case 'heading-2':

package/dist/cjs/ui/global-styles.js

@@ -204,7 +204,7 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyleSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
-var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
+var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-font-size > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
 
 /**
  * Please do not change change transform to display:none, or visibility:hidden
@@ -240,6 +240,12 @@ var globalStyles = function globalStyles() {
     '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-node-type="expand"], [data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       marginTop: '0 !important'
+    },
+    // Font-size wrapper is a div with no inherent margin — reach through to the content node inside.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '.ProseMirror-widget:first-child + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      marginTop: '0 !important'
     }
   });
 };
@@ -333,6 +339,13 @@ var topLevelNodeMarginStyles = (0, _react.css)({
     '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       marginTop: '0 !important'
+    },
+    // When a drop target widget is inserted during drag, the font-size wrapper is no longer
+    // adjacent to the first widget. Reach through the wrapper to zero the inner content margin.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, > .ProseMirror-widget:first-child + .ProseMirror-gapcursor + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      marginTop: '0 !important'
     }
   }
 });

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

@@ -24,6 +24,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _decorationsCommon = require("../pm-plugins/decorations-common");
 var _dragHandlePositions = require("../pm-plugins/utils/drag-handle-positions");
 var _widgetPositions = require("../pm-plugins/utils/widget-positions");
 var _consts = require("./consts");
@@ -181,6 +182,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   var calculatePosition = (0, _react.useCallback)(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
+    var pos = getPos();
+    var node = pos !== undefined ? view.state.doc.nodeAt(pos) : undefined;
     var safeAnchorName = (0, _anchorName.refreshAnchorName)({
       getPos: getPos,
       view: view,
@@ -211,7 +214,8 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
     if (supportsAnchor) {
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
-        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
+        // small text requires further tweaking to positioning, re-using existing methods to calculate to keep it unified with drag handle
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(node && node.type.name === 'paragraph' && (0, _expValEquals.expValEquals)('platform_editor_small_font_size', 'isEnabled', true) ? (0, _decorationsCommon.getNodeTypeWithLevel)(node) : rootNodeType), "px)")
       }, bottom);
     }
 

package/dist/es2019/pm-plugins/decorations-common.js

@@ -2,6 +2,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isFontSizeMarkActive } from './utils/validation';
 export const TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export const TYPE_HANDLE_DEC = 'drag-handle';
 export const TYPE_NODE_DEC = 'node-decoration';
@@ -10,8 +12,17 @@ export const getNodeAnchor = node => {
   const handleId = ObjHash.getForNode(node);
   return `--node-anchor-${node.type.name}-${handleId}`;
 };
+const getSubType = node => {
+  if (node.attrs.level) {
+    return `-${node.attrs.level}`;
+  }
+  if (isFontSizeMarkActive(node)) {
+    return '-small';
+  }
+  return '';
+};
 export const getNodeTypeWithLevel = node => {
-  const subType = node.attrs.level ? `-${node.attrs.level}` : '';
+  const subType = expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getSubType(node) : node.attrs.level ? `-${node.attrs.level}` : '';
   return node.type.name + subType;
 };
 class ObjHash {

package/dist/es2019/pm-plugins/handle-mouse-over.js

@@ -34,6 +34,16 @@ const getDefaultNodeSelector = memoizeOne(() => {
   // we don't show handler for node nested in table
   return getNodeSelector([...IGNORE_NODES_NEXT, 'media'], [...IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT, 'table']);
 });
+
+// Block marks (e.g. font-size) wrap paragraphs in an extra div, making parentRootElement
+// the mark wrapper instead of the panel content container. When that happens, recalculate
+// the index relative to the panel content so the first-child check stays accurate.
+const getBlockMarkPanelIndexAdjustment = (parentRootElement, index) => {
+  if (expValEquals('platform_editor_small_font_size', 'isEnabled', true) && parentRootElement.classList.contains('fabric-editor-block-mark') && parentRootElement.parentElement) {
+    return Array.from(parentRootElement.parentElement.childNodes).indexOf(parentRootElement);
+  }
+  return index;
+};
 export const handleMouseOver = (view, event, api) => {
   var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$editorViewMode$s, _api$blockControls$sh, _api$blockControls2, _api$blockControls2$s, _target$classList;
   const {
@@ -156,10 +166,10 @@ export const handleMouseOver = (view, event, api) => {
       const childNodes = Array.from(parentRootElement.childNodes);
       const index = childNodes.indexOf(rootElement);
       pos = view.posAtDOM(parentRootElement, index);
-
+      const panelIndex = getBlockMarkPanelIndexAdjustment(parentRootElement, index);
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       const firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 ? void 0 : (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (panelIndex === 0 || firstChildIsWidget && panelIndex === 1)) {
         return false;
       }
     } else {

package/dist/es2019/pm-plugins/utils/drag-handle-positions.js

@@ -1,6 +1,6 @@
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 const STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export const getTopPosition = (dom, type) => {
   if (!dom) {
@@ -26,6 +26,8 @@ export const getTopPosition = (dom, type) => {
     return `${dom.offsetTop - DRAG_HANDLE_H5_TOP_ADJUSTMENT}px`;
   } else if (type === 'heading-6') {
     return `${dom.offsetTop - DRAG_HANDLE_H6_TOP_ADJUSTMENT}px`;
+  } else if (type === 'paragraph-small') {
+    return `${dom.offsetTop + DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT}px`;
   } else if (type === 'paragraph') {
     return `${dom.offsetTop + DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT}px`;
   } else {

package/dist/es2019/pm-plugins/utils/validation.js

@@ -22,6 +22,9 @@ export const isExpand = nodeType => {
 export const isNestedExpand = nodeType => {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+export const isFontSizeMarkActive = node => {
+  return node.type.name === 'paragraph' && node.marks.some(mark => mark.type.name === 'fontSize');
+};
 export const isInSameLayout = ($from, $to) => {
   const fromNode = $from.nodeAfter;
   const toNode = $to.nodeAfter;

package/dist/es2019/ui/consts.js

@@ -19,6 +19,7 @@ export const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+export const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -110,6 +111,8 @@ export const topPositionAdjustment = nodeType => {
       return DRAG_HANDLE_HEIGHT;
     case 'paragraph':
       return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
+    case 'paragraph-small':
+      return DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT;
     case 'heading-1':
       return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
     case 'heading-2':

package/dist/es2019/ui/global-styles.js

@@ -255,7 +255,7 @@ const dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 const dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 const dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 const withInlineNodeStyleSelectors = [`${dragHandleContainer}:has(${paragraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${indentatedParagraphWithTrailingBreakAsOnlyChild}) ${dragHandleSelector}`, `${dragHandleContainer}:has(${paragraphWithPlaceholder}) ${dragHandleSelector}`].join(', ');
-const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child`].join(', ');
+const withFormatInLayoutStyleFixSelectors = [`${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-font-size > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-indentation-mark > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-alignment > p:first-child`, `${dragHandleContainer}:first-child + ${dropTargetContainer} + .fabric-editor-font-size > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-alignment > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-indentation-mark > p:first-child`, `${dropTargetContainer}:first-child + .fabric-editor-font-size > p:first-child`, `${dragHandleContainer}:first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child`, `${dragHandleContainer}:first-child + .fabric-editor-font-size > :is(h1, h2, h3, h4, h5, h6):first-child`].join(', ');
 
 /**
  * Please do not change change transform to display:none, or visibility:hidden
@@ -293,6 +293,12 @@ const globalStyles = () => css({
   '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-node-type="expand"], [data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
     marginTop: '0 !important'
+  },
+  // Font-size wrapper is a div with no inherent margin — reach through to the content node inside.
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+  '.ProseMirror-widget:first-child + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+    marginTop: '0 !important'
   }
 });
 const quickInsertStyles = () => css({
@@ -383,6 +389,13 @@ const topLevelNodeMarginStyles = css({
     '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       marginTop: '0 !important'
+    },
+    // When a drop target widget is inserted during drag, the font-size wrapper is no longer
+    // adjacent to the first widget. Reach through the wrapper to zero the inner content margin.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, > .ProseMirror-widget:first-child + .ProseMirror-gapcursor + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      marginTop: '0 !important'
     }
   }
 });

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

@@ -21,6 +21,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
@@ -170,6 +171,8 @@ export const TypeAheadControl = ({
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   const calculatePosition = useCallback(() => {
     const supportsAnchor = CSS.supports('top', `anchor(${rootAnchorName} start)`) && CSS.supports('left', `anchor(${rootAnchorName} start)`);
+    const pos = getPos();
+    const node = pos !== undefined ? view.state.doc.nodeAt(pos) : undefined;
     const safeAnchorName = refreshAnchorName({
       getPos,
       view,
@@ -200,7 +203,8 @@ export const TypeAheadControl = ({
     if (supportsAnchor) {
       return {
         left: isEdgeCase ? `calc(anchor(${safeAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${safeAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
-        top: `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`,
+        // small text requires further tweaking to positioning, re-using existing methods to calculate to keep it unified with drag handle
+        top: `calc(anchor(${safeAnchorName} start) + ${topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType)}px)`,
         ...bottom
       };
     }

package/dist/esm/pm-plugins/decorations-common.js

@@ -4,6 +4,8 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import ReactDOM from 'react-dom';
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 import uuid from 'uuid';
+import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
+import { isFontSizeMarkActive } from './utils/validation';
 export var TYPE_DROP_TARGET_DEC = 'drop-target-decoration';
 export var TYPE_HANDLE_DEC = 'drag-handle';
 export var TYPE_NODE_DEC = 'node-decoration';
@@ -12,8 +14,17 @@ export var getNodeAnchor = function getNodeAnchor(node) {
   var handleId = ObjHash.getForNode(node);
   return "--node-anchor-".concat(node.type.name, "-").concat(handleId);
 };
+var getSubType = function getSubType(node) {
+  if (node.attrs.level) {
+    return "-".concat(node.attrs.level);
+  }
+  if (isFontSizeMarkActive(node)) {
+    return '-small';
+  }
+  return '';
+};
 export var getNodeTypeWithLevel = function getNodeTypeWithLevel(node) {
-  var subType = node.attrs.level ? "-".concat(node.attrs.level) : '';
+  var subType = expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getSubType(node) : node.attrs.level ? "-".concat(node.attrs.level) : '';
   return node.type.name + subType;
 };
 var ObjHash = /*#__PURE__*/function () {

package/dist/esm/pm-plugins/handle-mouse-over.js

@@ -37,6 +37,16 @@ var getDefaultNodeSelector = memoizeOne(function () {
   // we don't show handler for node nested in table
   return getNodeSelector([].concat(_toConsumableArray(IGNORE_NODES_NEXT), ['media']), [].concat(_toConsumableArray(IGNORE_NODE_DESCENDANTS_ADVANCED_LAYOUT), ['table']));
 });
+
+// Block marks (e.g. font-size) wrap paragraphs in an extra div, making parentRootElement
+// the mark wrapper instead of the panel content container. When that happens, recalculate
+// the index relative to the panel content so the first-child check stays accurate.
+var getBlockMarkPanelIndexAdjustment = function getBlockMarkPanelIndexAdjustment(parentRootElement, index) {
+  if (expValEquals('platform_editor_small_font_size', 'isEnabled', true) && parentRootElement.classList.contains('fabric-editor-block-mark') && parentRootElement.parentElement) {
+    return Array.from(parentRootElement.parentElement.childNodes).indexOf(parentRootElement);
+  }
+  return index;
+};
 export var handleMouseOver = function handleMouseOver(view, event, api) {
   var _api$blockControls, _api$editorDisabled, _api$editorViewMode, _api$blockControls$sh, _api$blockControls2, _target$classList;
   var _ref = (api === null || api === void 0 || (_api$blockControls = api.blockControls) === null || _api$blockControls === void 0 ? void 0 : _api$blockControls.sharedState.currentState()) || {},
@@ -157,10 +167,10 @@ export var handleMouseOver = function handleMouseOver(view, event, api) {
       var childNodes = Array.from(parentRootElement.childNodes);
       var index = childNodes.indexOf(rootElement);
       pos = view.posAtDOM(parentRootElement, index);
-
+      var panelIndex = getBlockMarkPanelIndexAdjustment(parentRootElement, index);
       // We want to exlude handles showing for first element in a Panel, ignoring widgets like gapcursor
       var firstChildIsWidget = parentRootElement === null || parentRootElement === void 0 || (_parentRootElement$ch = parentRootElement.children[0]) === null || _parentRootElement$ch === void 0 ? void 0 : _parentRootElement$ch.classList.contains('ProseMirror-widget');
-      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (index === 0 || firstChildIsWidget && index === 1)) {
+      if (parentElement && parentElementType === 'panel' && !parentElement.classList.contains('ak-editor-panel__no-icon') && (panelIndex === 0 || firstChildIsWidget && panelIndex === 1)) {
         return false;
       }
     } else {

package/dist/esm/pm-plugins/utils/drag-handle-positions.js

@@ -1,6 +1,6 @@
 import { DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
-import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
+import { DRAG_HANDLE_DIVIDER_TOP_ADJUSTMENT, DRAG_HANDLE_H1_TOP_ADJUSTMENT, DRAG_HANDLE_H2_TOP_ADJUSTMENT, DRAG_HANDLE_H4_TOP_ADJUSTMENT, DRAG_HANDLE_H5_TOP_ADJUSTMENT, DRAG_HANDLE_H6_TOP_ADJUSTMENT, DRAG_HANDLE_HEIGHT, DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, dragHandleGap } from '../../ui/consts';
 var STICKY_NODES = ['panel', 'table', 'expand', 'layoutSection', 'bodiedExtension'];
 export var getTopPosition = function getTopPosition(dom, type) {
   if (!dom) {
@@ -26,6 +26,8 @@ export var getTopPosition = function getTopPosition(dom, type) {
     return "".concat(dom.offsetTop - DRAG_HANDLE_H5_TOP_ADJUSTMENT, "px");
   } else if (type === 'heading-6') {
     return "".concat(dom.offsetTop - DRAG_HANDLE_H6_TOP_ADJUSTMENT, "px");
+  } else if (type === 'paragraph-small') {
+    return "".concat(dom.offsetTop + DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT, "px");
   } else if (type === 'paragraph') {
     return "".concat(dom.offsetTop + DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT, "px");
   } else {

package/dist/esm/pm-plugins/utils/validation.js

@@ -21,6 +21,11 @@ export var isExpand = function isExpand(nodeType) {
 export var isNestedExpand = function isNestedExpand(nodeType) {
   return nodeType === nodeType.schema.nodes.nestedExpand;
 };
+export var isFontSizeMarkActive = function isFontSizeMarkActive(node) {
+  return node.type.name === 'paragraph' && node.marks.some(function (mark) {
+    return mark.type.name === 'fontSize';
+  });
+};
 export var isInSameLayout = function isInSameLayout($from, $to) {
   var fromNode = $from.nodeAfter;
   var toNode = $to.nodeAfter;

package/dist/esm/ui/consts.js

@@ -21,6 +21,7 @@ export var DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export var DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export var DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export var DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+export var DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
 
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
@@ -112,6 +113,8 @@ export var topPositionAdjustment = function topPositionAdjustment(nodeType) {
       return DRAG_HANDLE_HEIGHT;
     case 'paragraph':
       return DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT;
+    case 'paragraph-small':
+      return DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT;
     case 'heading-1':
       return DRAG_HANDLE_H1_TOP_ADJUSTMENT;
     case 'heading-2':

package/dist/esm/ui/global-styles.js

@@ -197,7 +197,7 @@ var dragHandleSelector = 'button[data-testid="block-ctrl-drag-handle"]';
 var dropTargetContainer = '.ProseMirror-widget[data-blocks-drop-target-container="true"]';
 var dividerBodiedInCustomPanelWithNoIconSelector = '[data-panel-type].ak-editor-panel__no-icon .ProseMirror-widget:first-child + .ProseMirror-widget:nth-child(2) + hr, [data-panel-type] hr:first-child';
 var withInlineNodeStyleSelectors = ["".concat(dragHandleContainer, ":has(").concat(paragraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(indentatedParagraphWithTrailingBreakAsOnlyChild, ") ").concat(dragHandleSelector), "".concat(dragHandleContainer, ":has(").concat(paragraphWithPlaceholder, ") ").concat(dragHandleSelector)].join(', ');
-var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
+var withFormatInLayoutStyleFixSelectors = ["".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-indentation-mark > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-alignment > p:first-child"), "".concat(dragHandleContainer, ":first-child + ").concat(dropTargetContainer, " + .fabric-editor-font-size > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-alignment > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-indentation-mark > p:first-child"), "".concat(dropTargetContainer, ":first-child + .fabric-editor-font-size > p:first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-indentation-mark > :is(h1, h2, h3, h4, h5, h6):first-child"), "".concat(dragHandleContainer, ":first-child + .fabric-editor-font-size > :is(h1, h2, h3, h4, h5, h6):first-child")].join(', ');
 
 /**
  * Please do not change change transform to display:none, or visibility:hidden
@@ -233,6 +233,12 @@ var globalStyles = function globalStyles() {
     '.ProseMirror-widget:first-child + *:not([data-panel-type], .code-block, [data-node-type="nestedExpand"], [data-node-type="expand"], [data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       marginTop: '0 !important'
+    },
+    // Font-size wrapper is a div with no inherent margin — reach through to the content node inside.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '.ProseMirror-widget:first-child + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      marginTop: '0 !important'
     }
   });
 };
@@ -326,6 +332,13 @@ var topLevelNodeMarginStyles = css({
     '> .ProseMirror-widget:first-child + .ProseMirror-gapcursor + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"]), > .ProseMirror-widget:first-child + *:not([data-layout-section="true"], [data-prosemirror-node-name="bodiedSyncBlock"])': {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles -- Ignored via go/DSP-18766
       marginTop: '0 !important'
+    },
+    // When a drop target widget is inserted during drag, the font-size wrapper is no longer
+    // adjacent to the first widget. Reach through the wrapper to zero the inner content margin.
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
+    '> .ProseMirror-widget:first-child + .ProseMirror-widget + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child, > .ProseMirror-widget:first-child + .ProseMirror-gapcursor + .fabric-editor-font-size > :is(p, h1, h2, h3, h4, h5, h6):first-child': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-important-styles
+      marginTop: '0 !important'
     }
   }
 });

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

@@ -25,6 +25,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { Box, Pressable, xcss } from '@atlaskit/primitives';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
+import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
 import { getControlBottomCSSValue, getControlHeightCSSValue, getNodeHeight, getTopPosition, shouldBeSticky } from '../pm-plugins/utils/drag-handle-positions';
 import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
 import { QUICK_INSERT_DIMENSIONS, QUICK_INSERT_HEIGHT, QUICK_INSERT_LEFT_OFFSET, QUICK_INSERT_WIDTH, rootElementGap, STICKY_CONTROLS_TOP_MARGIN_FOR_STICKY_HEADER, topPositionAdjustment } from './consts';
@@ -175,6 +176,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
   // CHANGES - `removed editorExperiment('advanced_layouts', true) && isLayoutColumn` checks as quick insert button will not be positioned for layout column
   var calculatePosition = useCallback(function () {
     var supportsAnchor = CSS.supports('top', "anchor(".concat(rootAnchorName, " start)")) && CSS.supports('left', "anchor(".concat(rootAnchorName, " start)"));
+    var pos = getPos();
+    var node = pos !== undefined ? view.state.doc.nodeAt(pos) : undefined;
     var safeAnchorName = refreshAnchorName({
       getPos: getPos,
       view: view,
@@ -205,7 +208,8 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
     if (supportsAnchor) {
       return _objectSpread({
         left: isEdgeCase ? "calc(anchor(".concat(safeAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(safeAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
-        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
+        // small text requires further tweaking to positioning, re-using existing methods to calculate to keep it unified with drag handle
+        top: "calc(anchor(".concat(safeAnchorName, " start) + ").concat(topPositionAdjustment(node && node.type.name === 'paragraph' && expValEquals('platform_editor_small_font_size', 'isEnabled', true) ? getNodeTypeWithLevel(node) : rootNodeType), "px)")
       }, bottom);
     }
 

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

@@ -6,6 +6,7 @@ export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
 export declare const isDoc: (nodeType: NodeType) => Boolean;
 export declare const isExpand: (nodeType: NodeType) => Boolean;
 export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
+export declare const isFontSizeMarkActive: (node: PMNode) => boolean;
 export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => boolean;
 /**
  * This function converts an expand into a nested expand,

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

@@ -15,6 +15,7 @@ export declare const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+export declare const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
  *  also want to avoid heavily nested cases to descope potential corner cases.

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

@@ -6,6 +6,7 @@ export declare const isLayoutColumn: (nodeType: NodeType) => Boolean;
 export declare const isDoc: (nodeType: NodeType) => Boolean;
 export declare const isExpand: (nodeType: NodeType) => Boolean;
 export declare const isNestedExpand: (nodeType: NodeType) => Boolean;
+export declare const isFontSizeMarkActive: (node: PMNode) => boolean;
 export declare const isInSameLayout: ($from: ResolvedPos, $to: ResolvedPos) => boolean;
 /**
  * This function converts an expand into a nested expand,

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

@@ -15,6 +15,7 @@ export declare const DRAG_HANDLE_H5_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_H6_TOP_ADJUSTMENT = 3;
 export declare const DRAG_HANDLE_LAYOUT_SECTION_TOP_ADJUSTMENT = 8;
 export declare const DRAG_HANDLE_PARAGRAPH_TOP_ADJUSTMENT = 2;
+export declare const DRAG_HANDLE_PARAGRAPH_SMALL_TOP_ADJUSTMENT = 0;
 /** We only want to shift-select nodes that are at the top level of a document.
  *  This is because funky things happen when selecting inside of tableCells, but we
  *  also want to avoid heavily nested cases to descope potential corner cases.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "9.1.8",
+	"version": "9.1.10",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -41,7 +41,7 @@
 		"@atlaskit/editor-plugin-quick-insert": "^8.0.0",
 		"@atlaskit/editor-plugin-selection": "^8.0.0",
 		"@atlaskit/editor-plugin-toolbar": "^5.1.0",
-		"@atlaskit/editor-plugin-type-ahead": "^8.1.0",
+		"@atlaskit/editor-plugin-type-ahead": "^8.2.0",
 		"@atlaskit/editor-plugin-user-intent": "^6.0.0",
 		"@atlaskit/editor-plugin-width": "^9.0.0",
 		"@atlaskit/editor-prosemirror": "^7.3.0",
@@ -56,7 +56,7 @@
 		"@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
 		"@atlaskit/primitives": "^18.1.0",
 		"@atlaskit/theme": "^23.0.0",
-		"@atlaskit/tmp-editor-statsig": "^56.0.0",
+		"@atlaskit/tmp-editor-statsig": "^57.0.0",
 		"@atlaskit/tokens": "^12.0.0",
 		"@atlaskit/tooltip": "^21.1.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^112.18.0",
+		"@atlaskit/editor-common": "^112.19.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
 		"react-intl-next": "npm:react-intl@^5.18.1"