@atlaskit/editor-plugin-block-controls 7.11.4 → 7.12.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/editor-plugin-block-controls
 
+## 7.12.1
+
+### Patch Changes
+
+- [`79cafe9f09a05`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79cafe9f09a05) -
+  EDITOR-3756 More general approach to support custom preserved selection mapping
+
+## 7.12.0
+
+### Minor Changes
+
+- [`ed2e45b56a325`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ed2e45b56a325) -
+  ED-29696 fix CSS anchor selector
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 7.11.4
 
 ### Patch Changes

package/dist/cjs/editor-commands/move-node.js

@@ -15,6 +15,7 @@ var _types = require("@atlaskit/editor-common/types");
 var _utils = require("@atlaskit/editor-common/utils");
 var _model = require("@atlaskit/editor-prosemirror/model");
 var _state = require("@atlaskit/editor-prosemirror/state");
+var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _utils2 = require("@atlaskit/editor-prosemirror/utils");
 var _utils3 = require("@atlaskit/editor-tables/utils");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
@@ -426,7 +427,11 @@ var moveNode = exports.moveNode = function moveNode(api) {
       if (inputMethod === _analytics.INPUT_METHOD.DRAG_AND_DROP) {
         tr = (0, _getSelection.setCursorPositionAtMovedNode)(tr, mappedTo, api);
       } else if (preservedSelection) {
-        // do nothing here to allow the selection preservation plugin to handle mapping the selection
+        var _currMeta = tr.getMeta(_main.key);
+        var nodeMovedOffset = mappedTo - sliceFrom;
+        tr.setMeta(_main.key, _objectSpread(_objectSpread({}, _currMeta), {}, {
+          preservedSelectionMapping: new _transform.Mapping([new _transform.StepMap([0, 0, nodeMovedOffset])])
+        }));
       } else if (isMultiSelect) {
         var _api$blockControls$co;
         tr = (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
@@ -437,8 +442,7 @@ var moveNode = exports.moveNode = function moveNode(api) {
       }
       var currMeta = tr.getMeta(_main.key);
       tr.setMeta(_main.key, _objectSpread(_objectSpread({}, currMeta), {}, {
-        nodeMoved: true,
-        nodeMovedOffset: mappedTo - sliceFrom
+        nodeMoved: true
       }));
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.mapPreservedSelection = exports.getSelectedSlicePosition = exports.getMultiSelectionIfPosInside = exports.expandSelectionHeadToNodeAtPos = exports.alignAnchorHeadInDirectionOfPos = void 0;
 var _selection = require("@atlaskit/editor-common/selection");
 var _state = require("@atlaskit/editor-prosemirror/state");
-var _transform = require("@atlaskit/editor-prosemirror/transform");
 var _main = require("../main");
 var _getSelection = require("./getSelection");
 var getMultiSelectionIfPosInside = exports.getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
@@ -91,9 +90,8 @@ var alignAnchorHeadInDirectionOfPos = exports.alignAnchorHeadInDirectionOfPos =
  */
 var mapPreservedSelection = exports.mapPreservedSelection = function mapPreservedSelection(selection, tr) {
   var _ref = (0, _main.getBlockControlsMeta)(tr) || {},
-    nodeMoved = _ref.nodeMoved,
-    nodeMovedOffset = _ref.nodeMovedOffset;
-  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new _transform.Mapping([new _transform.StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+    preservedSelectionMapping = _ref.preservedSelectionMapping;
+  var mapping = preservedSelectionMapping || tr.mapping;
   if (selection instanceof _state.TextSelection) {
     var from = mapping.map(selection.from);
     var to = mapping.map(selection.to);

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

@@ -405,29 +405,27 @@ var blockCardWithoutLayout = (0, _react.css)({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 var dragHandlerAnchorStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+    '[data-testid="block-ctrl-decorator-widget"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+    '[data-testid="block-ctrl-quick-insert-button"] + *': (0, _defineProperty2.default)({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    }
+    })
   }
 });
 

package/dist/es2019/editor-commands/move-node.js

@@ -7,6 +7,7 @@ import { DIRECTION } from '@atlaskit/editor-common/types';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -426,7 +427,12 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   if (inputMethod === INPUT_METHOD.DRAG_AND_DROP) {
     tr = setCursorPositionAtMovedNode(tr, mappedTo, api);
   } else if (preservedSelection) {
-    // do nothing here to allow the selection preservation plugin to handle mapping the selection
+    const currMeta = tr.getMeta(key);
+    const nodeMovedOffset = mappedTo - sliceFrom;
+    tr.setMeta(key, {
+      ...currMeta,
+      preservedSelectionMapping: new Mapping([new StepMap([0, 0, nodeMovedOffset])])
+    });
   } else if (isMultiSelect) {
     var _api$blockControls$co2;
     tr = (_api$blockControls$co2 = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
@@ -438,8 +444,7 @@ export const moveNode = api => (start, to, inputMethod = INPUT_METHOD.DRAG_AND_D
   const currMeta = tr.getMeta(key);
   tr.setMeta(key, {
     ...currMeta,
-    nodeMoved: true,
-    nodeMovedOffset: mappedTo - sliceFrom
+    nodeMoved: true
   });
   api === null || api === void 0 ? void 0 : api.core.actions.focus();
   const $mappedTo = tr.doc.resolve(mappedTo);

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

@@ -1,6 +1,5 @@
 import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { getBlockControlsMeta, key } from '../main';
 import { collapseToSelectionRange } from './getSelection';
 export const getMultiSelectionIfPosInside = (api, pos, tr) => {
@@ -86,10 +85,9 @@ export const alignAnchorHeadInDirectionOfPos = (selection, pos) => {
  */
 export const mapPreservedSelection = (selection, tr) => {
   const {
-    nodeMoved,
-    nodeMovedOffset
+    preservedSelectionMapping
   } = getBlockControlsMeta(tr) || {};
-  const mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+  const mapping = preservedSelectionMapping || tr.mapping;
   if (selection instanceof TextSelection) {
     const from = mapping.map(selection.from);
     const to = mapping.map(selection.to);

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

@@ -483,28 +483,32 @@ const blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+const nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 const dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    '[data-testid="block-ctrl-decorator-widget"] + *': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`${nextAnchorSelector}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+      }
     },
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+    '[data-testid="block-ctrl-quick-insert-button"] + *': {
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+      [`${nextAnchorSelector}`]: {
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
+        anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
+      }
     }
   }
 });

package/dist/esm/editor-commands/move-node.js

@@ -10,6 +10,7 @@ import { DIRECTION } from '@atlaskit/editor-common/types';
 import { isEmptyParagraph } from '@atlaskit/editor-common/utils';
 import { Fragment, Slice } from '@atlaskit/editor-prosemirror/model';
 import { NodeSelection, Selection } from '@atlaskit/editor-prosemirror/state';
+import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { findChildrenByType, findParentNodeOfType, findParentNodeOfTypeClosestToPos } from '@atlaskit/editor-prosemirror/utils';
 import { findTable, isInTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { fg } from '@atlaskit/platform-feature-flags';
@@ -420,7 +421,11 @@ export var moveNode = function moveNode(api) {
       if (inputMethod === INPUT_METHOD.DRAG_AND_DROP) {
         tr = setCursorPositionAtMovedNode(tr, mappedTo, api);
       } else if (preservedSelection) {
-        // do nothing here to allow the selection preservation plugin to handle mapping the selection
+        var _currMeta = tr.getMeta(key);
+        var nodeMovedOffset = mappedTo - sliceFrom;
+        tr.setMeta(key, _objectSpread(_objectSpread({}, _currMeta), {}, {
+          preservedSelectionMapping: new Mapping([new StepMap([0, 0, nodeMovedOffset])])
+        }));
       } else if (isMultiSelect) {
         var _api$blockControls$co;
         tr = (_api$blockControls$co = api === null || api === void 0 ? void 0 : api.blockControls.commands.setMultiSelectPositions(mappedTo, mappedTo + sliceSize)({
@@ -431,8 +436,7 @@ export var moveNode = function moveNode(api) {
       }
       var currMeta = tr.getMeta(key);
       tr.setMeta(key, _objectSpread(_objectSpread({}, currMeta), {}, {
-        nodeMoved: true,
-        nodeMovedOffset: mappedTo - sliceFrom
+        nodeMoved: true
       }));
       api === null || api === void 0 || api.core.actions.focus();
       var $mappedTo = tr.doc.resolve(mappedTo);

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

@@ -1,6 +1,5 @@
 import { expandToBlockRange } from '@atlaskit/editor-common/selection';
 import { NodeSelection, TextSelection } from '@atlaskit/editor-prosemirror/state';
-import { Mapping, StepMap } from '@atlaskit/editor-prosemirror/transform';
 import { getBlockControlsMeta, key } from '../main';
 import { collapseToSelectionRange } from './getSelection';
 export var getMultiSelectionIfPosInside = function getMultiSelectionIfPosInside(api, pos, tr) {
@@ -85,9 +84,8 @@ export var alignAnchorHeadInDirectionOfPos = function alignAnchorHeadInDirection
  */
 export var mapPreservedSelection = function mapPreservedSelection(selection, tr) {
   var _ref = getBlockControlsMeta(tr) || {},
-    nodeMoved = _ref.nodeMoved,
-    nodeMovedOffset = _ref.nodeMovedOffset;
-  var mapping = nodeMoved && typeof nodeMovedOffset === 'number' ? new Mapping([new StepMap([0, 0, nodeMovedOffset])]) : tr.mapping;
+    preservedSelectionMapping = _ref.preservedSelectionMapping;
+  var mapping = preservedSelectionMapping || tr.mapping;
   if (selection instanceof TextSelection) {
     var from = mapping.map(selection.from);
     var to = mapping.map(selection.to);

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

@@ -398,29 +398,27 @@ var blockCardWithoutLayout = css({
     '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
   }
 });
+var nextAnchorSelector = ['&[data-node-anchor]',
+// adjacent sibling with anchor
+'&:not([data-node-anchor]) [data-node-anchor]',
+// nested anchor inside adjacent sibling
+'&.ProseMirror-widget + [data-node-anchor]',
+// adjacent sibling with anchor (when next to a widget like gap cursor)
+'&.ProseMirror-widget + :not([data-node-anchor]) [data-node-anchor]' // nested anchor inside adjacent sibling (when next to a widget like gap cursor)
+].join(', ');
 var dragHandlerAnchorStyles = css({
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
   '.ProseMirror': {
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
+    '[data-testid="block-ctrl-decorator-widget"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
+    '[data-testid="block-ctrl-quick-insert-button"] + *': _defineProperty({}, "".concat(nextAnchorSelector), {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
       anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    },
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
-    '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
-      anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
-    }
+    })
   }
 });
 

package/dist/types/blockControlsPluginType.d.ts

@@ -15,6 +15,7 @@ import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { type Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
     anchorName: string;
@@ -162,7 +163,7 @@ export type BlockControlsMeta = {
     editorBlurred: boolean;
     editorHeight: number;
     nodeMoved: boolean;
-    nodeMovedOffset: number;
+    preservedSelectionMapping: Mapping;
     type: string;
 };
 export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT | INPUT_METHOD.BLOCK_MENU;

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

@@ -15,6 +15,7 @@ import type { TypeAheadPlugin } from '@atlaskit/editor-plugin-type-ahead';
 import type { UserIntentPlugin } from '@atlaskit/editor-plugin-user-intent';
 import type { WidthPlugin } from '@atlaskit/editor-plugin-width';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
+import { type Mapping } from '@atlaskit/editor-prosemirror/transform';
 import { type DecorationSet } from '@atlaskit/editor-prosemirror/view';
 export type ActiveNode = {
     anchorName: string;
@@ -162,7 +163,7 @@ export type BlockControlsMeta = {
     editorBlurred: boolean;
     editorHeight: number;
     nodeMoved: boolean;
-    nodeMovedOffset: number;
+    preservedSelectionMapping: Mapping;
     type: string;
 };
 export type MoveNodeMethod = INPUT_METHOD.DRAG_AND_DROP | INPUT_METHOD.SHORTCUT | INPUT_METHOD.BLOCK_MENU;

package/package.json

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