@atlaskit/editor-plugin-block-controls 24.0.1 → 24.0.2

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 24.0.2
+
+### Patch Changes
+
+- [`834a52c0cc828`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/834a52c0cc828) -
+  Allow sparse gutter hover to target blocks nested inside table cells, matching legacy hover zone
+  behaviour
+- Updated dependencies
+
 ## 24.0.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/handle-sparse-hover-target.js

@@ -8,8 +8,9 @@ var _nodeAnchor = require("@atlaskit/editor-common/node-anchor");
 var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _expValEqualsNoExposure = require("@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure");
 var _decorationsCommon = require("./decorations-common");
-var OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+var OPAQUE_BLOCKS = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
 var EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+var TABLE_CELLS = new Set(['tableCell', 'tableHeader']);
 var isPanelNodeTypeName = function isPanelNodeTypeName(nodeTypeName) {
   return nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && (0, _expValEqualsNoExposure.expValEqualsNoExposure)('platform_editor_controls_reliable_anchor', 'isEnabled', true) && (0, _fg.fg)('platform_editor_controls_reliable_anchor_patch_1');
 };
@@ -84,13 +85,16 @@ var handleSparseHoverTarget = exports.handleSparseHoverTarget = function handleS
     if (!_node.isBlock || EXCLUDED_BLOCKS.has(_node.type.name)) {
       continue;
     }
-    targetPosition = $pos.before(depth);
+    // Legacy hover excludes direct cell children, but can target deeper blocks inside them.
+    if (!TABLE_CELLS.has($pos.node(depth - 1).type.name)) {
+      targetPosition = $pos.before(depth);
+    }
     if (OPAQUE_BLOCKS.has(_node.type.name)) {
       opaque = true;
       break;
     }
   }
-  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name)) {
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name) && !TABLE_CELLS.has($pos.parent.type.name)) {
     // Browser positions over non-editable node chrome can resolve to the first editable child.
     // Keep the ancestor unless that child actually owns the hovered DOM target.
     var nodeAfterDOM = view.nodeDOM(position);

package/dist/cjs/pm-plugins/sparse-gutter-hover.js

@@ -15,7 +15,7 @@ var _handleMouseMove = require("./interaction-tracking/handle-mouse-move");
 var _pmPlugin = require("./interaction-tracking/pm-plugin");
 var _visibleBox = require("./utils/visible-box");
 var BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
-var TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+var TABLE_STRUCTURE_NODES = new Set(['table', 'tableRow', 'tableCell', 'tableHeader']);
 var LAYOUT_SECTION_SELECTOR = '[data-prosemirror-node-name="layoutSection"]';
 var LAYOUT_COLUMN_SELECTOR = '[data-prosemirror-node-name="layoutColumn"]';
 
@@ -32,9 +32,9 @@ var getVisibleLeft = function getVisibleLeft(block) {
 /**
  * Whether the element under the pointer can be part of a block's left gutter: a container block's
  * own padding (panel, layout, list…) or an editor wrapper around the content. Text and leaf blocks
- * have no gutter inside them, and neither do tables: like the legacy hover zones, anywhere inside a
- * table, including cell padding, shows the table's controls. Elements rendered beside the editor
- * (title, popups, toolbars) cover any gutter beneath them.
+ * have no gutter inside them. Table and cell padding shows the table's controls, but containers
+ * nested inside cells can own gutters for their children, as in the legacy hover zones. Elements
+ * rendered beside the editor (title, popups, toolbars) cover any gutter beneath them.
  */
 var isPossibleGutterElement = exports.isPossibleGutterElement = function isPossibleGutterElement(view, hoveredElement) {
   if (!(hoveredElement instanceof Element)) {
@@ -45,11 +45,11 @@ var isPossibleGutterElement = exports.isPossibleGutterElement = function isPossi
     return false;
   }
   if (owner && view.dom.contains(owner)) {
-    var _owner$getAttribute;
-    if (owner.closest(TABLE_SELECTOR)) {
+    var _owner$getAttribute, _owner$getAttribute2;
+    if (TABLE_STRUCTURE_NODES.has((_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : '')) {
       return false;
     }
-    var nodeType = view.state.schema.nodes[(_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : ''];
+    var nodeType = view.state.schema.nodes[(_owner$getAttribute2 = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute2 !== void 0 ? _owner$getAttribute2 : ''];
     return !(nodeType !== null && nodeType !== void 0 && nodeType.isTextblock) && !(nodeType !== null && nodeType !== void 0 && nodeType.isLeaf);
   }
   return view.dom.contains(hoveredElement) || hoveredElement.contains(view.dom);

package/dist/es2019/pm-plugins/handle-sparse-hover-target.js

@@ -2,8 +2,9 @@ import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNodeTypeWithLevel } from './decorations-common';
-const OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+const OPAQUE_BLOCKS = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
 const EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+const TABLE_CELLS = new Set(['tableCell', 'tableHeader']);
 const isPanelNodeTypeName = nodeTypeName => nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && expValEqualsNoExposure('platform_editor_controls_reliable_anchor', 'isEnabled', true) && fg('platform_editor_controls_reliable_anchor_patch_1');
 const redirectParagraphToWrappedMedia = (view, $target, targetPosition) => {
   const node = view.state.doc.nodeAt(targetPosition);
@@ -75,13 +76,16 @@ export const handleSparseHoverTarget = (view, target, api) => {
     if (!node.isBlock || EXCLUDED_BLOCKS.has(node.type.name)) {
       continue;
     }
-    targetPosition = $pos.before(depth);
+    // Legacy hover excludes direct cell children, but can target deeper blocks inside them.
+    if (!TABLE_CELLS.has($pos.node(depth - 1).type.name)) {
+      targetPosition = $pos.before(depth);
+    }
     if (OPAQUE_BLOCKS.has(node.type.name)) {
       opaque = true;
       break;
     }
   }
-  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name)) {
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name) && !TABLE_CELLS.has($pos.parent.type.name)) {
     // Browser positions over non-editable node chrome can resolve to the first editable child.
     // Keep the ancestor unless that child actually owns the hovered DOM target.
     const nodeAfterDOM = view.nodeDOM(position);

package/dist/es2019/pm-plugins/sparse-gutter-hover.js

@@ -9,7 +9,7 @@ import { handleMouseLeave } from './interaction-tracking/handle-mouse-move';
 import { getInteractionTrackingState } from './interaction-tracking/pm-plugin';
 import { getVisibleBox } from './utils/visible-box';
 const BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
-const TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+const TABLE_STRUCTURE_NODES = new Set(['table', 'tableRow', 'tableCell', 'tableHeader']);
 const LAYOUT_SECTION_SELECTOR = '[data-prosemirror-node-name="layoutSection"]';
 const LAYOUT_COLUMN_SELECTOR = '[data-prosemirror-node-name="layoutColumn"]';
 
@@ -24,9 +24,9 @@ const getVisibleLeft = block => {
 /**
  * Whether the element under the pointer can be part of a block's left gutter: a container block's
  * own padding (panel, layout, list…) or an editor wrapper around the content. Text and leaf blocks
- * have no gutter inside them, and neither do tables: like the legacy hover zones, anywhere inside a
- * table, including cell padding, shows the table's controls. Elements rendered beside the editor
- * (title, popups, toolbars) cover any gutter beneath them.
+ * have no gutter inside them. Table and cell padding shows the table's controls, but containers
+ * nested inside cells can own gutters for their children, as in the legacy hover zones. Elements
+ * rendered beside the editor (title, popups, toolbars) cover any gutter beneath them.
  */
 export const isPossibleGutterElement = (view, hoveredElement) => {
   if (!(hoveredElement instanceof Element)) {
@@ -37,11 +37,11 @@ export const isPossibleGutterElement = (view, hoveredElement) => {
     return false;
   }
   if (owner && view.dom.contains(owner)) {
-    var _owner$getAttribute;
-    if (owner.closest(TABLE_SELECTOR)) {
+    var _owner$getAttribute, _owner$getAttribute2;
+    if (TABLE_STRUCTURE_NODES.has((_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : '')) {
       return false;
     }
-    const nodeType = view.state.schema.nodes[(_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : ''];
+    const nodeType = view.state.schema.nodes[(_owner$getAttribute2 = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute2 !== void 0 ? _owner$getAttribute2 : ''];
     return !(nodeType !== null && nodeType !== void 0 && nodeType.isTextblock) && !(nodeType !== null && nodeType !== void 0 && nodeType.isLeaf);
   }
   return view.dom.contains(hoveredElement) || hoveredElement.contains(view.dom);

package/dist/esm/pm-plugins/handle-sparse-hover-target.js

@@ -2,8 +2,9 @@ import { getNodeIdProvider } from '@atlaskit/editor-common/node-anchor';
 import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { expValEqualsNoExposure } from '@atlaskit/tmp-editor-statsig/exp-val-equals-no-exposure';
 import { getNodeTypeWithLevel } from './decorations-common';
-var OPAQUE_BLOCKS = new Set(['table', 'bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
+var OPAQUE_BLOCKS = new Set(['bulletList', 'orderedList', 'taskList', 'decisionList', 'mediaSingle']);
 var EXCLUDED_BLOCKS = new Set(['listItem', 'tableRow', 'tableCell', 'tableHeader', 'caption']);
+var TABLE_CELLS = new Set(['tableCell', 'tableHeader']);
 var isPanelNodeTypeName = function isPanelNodeTypeName(nodeTypeName) {
   return nodeTypeName === 'panel' || nodeTypeName === 'panel_c1' && expValEqualsNoExposure('platform_editor_controls_reliable_anchor', 'isEnabled', true) && fg('platform_editor_controls_reliable_anchor_patch_1');
 };
@@ -78,13 +79,16 @@ export var handleSparseHoverTarget = function handleSparseHoverTarget(view, targ
     if (!_node.isBlock || EXCLUDED_BLOCKS.has(_node.type.name)) {
       continue;
     }
-    targetPosition = $pos.before(depth);
+    // Legacy hover excludes direct cell children, but can target deeper blocks inside them.
+    if (!TABLE_CELLS.has($pos.node(depth - 1).type.name)) {
+      targetPosition = $pos.before(depth);
+    }
     if (OPAQUE_BLOCKS.has(_node.type.name)) {
       opaque = true;
       break;
     }
   }
-  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name)) {
+  if (!opaque && (_$pos$nodeAfter = $pos.nodeAfter) !== null && _$pos$nodeAfter !== void 0 && _$pos$nodeAfter.isBlock && !EXCLUDED_BLOCKS.has($pos.nodeAfter.type.name) && !TABLE_CELLS.has($pos.parent.type.name)) {
     // Browser positions over non-editable node chrome can resolve to the first editable child.
     // Keep the ancestor unless that child actually owns the hovered DOM target.
     var nodeAfterDOM = view.nodeDOM(position);

package/dist/esm/pm-plugins/sparse-gutter-hover.js

@@ -9,7 +9,7 @@ import { handleMouseLeave } from './interaction-tracking/handle-mouse-move';
 import { getInteractionTrackingState } from './interaction-tracking/pm-plugin';
 import { getVisibleBox } from './utils/visible-box';
 var BLOCK_SELECTOR = '[data-prosemirror-node-block="true"]';
-var TABLE_SELECTOR = '[data-prosemirror-node-name="table"]';
+var TABLE_STRUCTURE_NODES = new Set(['table', 'tableRow', 'tableCell', 'tableHeader']);
 var LAYOUT_SECTION_SELECTOR = '[data-prosemirror-node-name="layoutSection"]';
 var LAYOUT_COLUMN_SELECTOR = '[data-prosemirror-node-name="layoutColumn"]';
 
@@ -26,9 +26,9 @@ var getVisibleLeft = function getVisibleLeft(block) {
 /**
  * Whether the element under the pointer can be part of a block's left gutter: a container block's
  * own padding (panel, layout, list…) or an editor wrapper around the content. Text and leaf blocks
- * have no gutter inside them, and neither do tables: like the legacy hover zones, anywhere inside a
- * table, including cell padding, shows the table's controls. Elements rendered beside the editor
- * (title, popups, toolbars) cover any gutter beneath them.
+ * have no gutter inside them. Table and cell padding shows the table's controls, but containers
+ * nested inside cells can own gutters for their children, as in the legacy hover zones. Elements
+ * rendered beside the editor (title, popups, toolbars) cover any gutter beneath them.
  */
 export var isPossibleGutterElement = function isPossibleGutterElement(view, hoveredElement) {
   if (!(hoveredElement instanceof Element)) {
@@ -39,11 +39,11 @@ export var isPossibleGutterElement = function isPossibleGutterElement(view, hove
     return false;
   }
   if (owner && view.dom.contains(owner)) {
-    var _owner$getAttribute;
-    if (owner.closest(TABLE_SELECTOR)) {
+    var _owner$getAttribute, _owner$getAttribute2;
+    if (TABLE_STRUCTURE_NODES.has((_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : '')) {
       return false;
     }
-    var nodeType = view.state.schema.nodes[(_owner$getAttribute = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute !== void 0 ? _owner$getAttribute : ''];
+    var nodeType = view.state.schema.nodes[(_owner$getAttribute2 = owner.getAttribute('data-prosemirror-node-name')) !== null && _owner$getAttribute2 !== void 0 ? _owner$getAttribute2 : ''];
     return !(nodeType !== null && nodeType !== void 0 && nodeType.isTextblock) && !(nodeType !== null && nodeType !== void 0 && nodeType.isLeaf);
   }
   return view.dom.contains(hoveredElement) || hoveredElement.contains(view.dom);

package/dist/types/pm-plugins/sparse-gutter-hover.d.ts

@@ -4,9 +4,9 @@ import type { BlockControlsPlugin } from '../blockControlsPluginType';
 /**
  * Whether the element under the pointer can be part of a block's left gutter: a container block's
  * own padding (panel, layout, list…) or an editor wrapper around the content. Text and leaf blocks
- * have no gutter inside them, and neither do tables: like the legacy hover zones, anywhere inside a
- * table, including cell padding, shows the table's controls. Elements rendered beside the editor
- * (title, popups, toolbars) cover any gutter beneath them.
+ * have no gutter inside them. Table and cell padding shows the table's controls, but containers
+ * nested inside cells can own gutters for their children, as in the legacy hover zones. Elements
+ * rendered beside the editor (title, popups, toolbars) cover any gutter beneath them.
  */
 export declare const isPossibleGutterElement: (view: EditorView, hoveredElement: EventTarget | null) => hoveredElement is Element;
 /** Returns a function that finds the block whose legacy hover zone contains the pointer. */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "24.0.1",
+	"version": "24.0.2",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",