@atlaskit/editor-plugin-block-controls 3.3.16 → 3.3.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +18 -0
- package/dist/cjs/pm-plugins/main.js +20 -18
- package/dist/cjs/ui/consts.js +3 -3
- package/dist/cjs/ui/quick-insert-button.js +3 -6
- package/dist/es2019/pm-plugins/main.js +20 -18
- package/dist/es2019/ui/consts.js +2 -2
- package/dist/es2019/ui/quick-insert-button.js +4 -7
- package/dist/esm/pm-plugins/main.js +20 -18
- package/dist/esm/ui/consts.js +2 -2
- package/dist/esm/ui/quick-insert-button.js +4 -7
- package/dist/types/ui/consts.d.ts +1 -0
- package/dist/types/ui/quick-insert-button.d.ts +1 -1
- package/dist/types-ts4.5/ui/consts.d.ts +1 -0
- package/dist/types-ts4.5/ui/quick-insert-button.d.ts +1 -1
- package/package.json +1 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.3.18
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#128661](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128661)
|
|
8
|
+
[`4e5d4eee96907`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e5d4eee96907) -
|
|
9
|
+
Add validation when recreating quick insert button, avoid recreating when root node is stable
|
|
10
|
+
- Updated dependencies
|
|
11
|
+
|
|
12
|
+
## 3.3.17
|
|
13
|
+
|
|
14
|
+
### Patch Changes
|
|
15
|
+
|
|
16
|
+
- [#128300](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128300)
|
|
17
|
+
[`b26295480eb23`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b26295480eb23) -
|
|
18
|
+
Always add left offset for quick insert to avoid it flicking in and out
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 3.3.16
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -187,7 +187,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
|
|
|
187
187
|
return nodeDecAtActivePos;
|
|
188
188
|
};
|
|
189
189
|
var newApply = exports.newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
|
|
190
|
-
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
190
|
+
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
191
191
|
var activeNode = currentState.activeNode,
|
|
192
192
|
decorations = currentState.decorations,
|
|
193
193
|
isResizerResizing = currentState.isResizerResizing,
|
|
@@ -315,12 +315,14 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
315
315
|
|
|
316
316
|
// Check if there's a new active node, and it differs from the last
|
|
317
317
|
var activeNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== ((_activeNode = activeNode) === null || _activeNode === void 0 ? void 0 : _activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== ((_activeNode2 = activeNode) === null || _activeNode2 === void 0 ? void 0 : _activeNode2.anchorName) || (meta === null || meta === void 0 || (_meta$activeNode$hand = meta.activeNode.handleOptions) === null || _meta$activeNode$hand === void 0 ? void 0 : _meta$activeNode$hand.isFocused));
|
|
318
|
+
var rootActiveNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootPos) !== ((_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.rootPos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootAnchorName) !== ((_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.rootAnchorName);
|
|
318
319
|
|
|
319
320
|
// Some browsers don't support anchor positioning, meaning we need to replace the handle when nodes change
|
|
320
321
|
var handleNeedsRedraw = shouldRedrawNodeDecs && !(0, _anchorUtils.isAnchorSupported)();
|
|
321
322
|
|
|
322
323
|
// Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
|
|
323
324
|
var shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
325
|
+
var shouldRecreateQuickInsertButton = latestActiveNode && (rootActiveNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
324
326
|
var shouldRemoveHandle = false;
|
|
325
327
|
if ((0, _platformFeatureFlags.fg)('platform_editor_remove_drag_handle_fix')) {
|
|
326
328
|
// If the active node is missing, we need to remove the handle
|
|
@@ -330,29 +332,29 @@ var newApply = exports.newApply = function newApply(api, formatMessage, tr, curr
|
|
|
330
332
|
shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
|
|
331
333
|
}
|
|
332
334
|
if (shouldRemoveHandle) {
|
|
333
|
-
var
|
|
334
|
-
var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (
|
|
335
|
+
var _activeNode5, _activeNode6;
|
|
336
|
+
var oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
|
|
335
337
|
decorations = decorations.remove(oldHandle);
|
|
336
338
|
if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
337
339
|
var oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations);
|
|
338
340
|
decorations = decorations.remove(oldQuickInsertButton);
|
|
339
341
|
}
|
|
340
|
-
} else if (api
|
|
341
|
-
var
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
var
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
342
|
+
} else if (api) {
|
|
343
|
+
var _latestActiveNode5;
|
|
344
|
+
if (shouldRecreateHandle) {
|
|
345
|
+
var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
|
|
346
|
+
var _oldHandle = (0, _decorationsDragHandle.findHandleDec)(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
|
|
347
|
+
decorations = decorations.remove(_oldHandle);
|
|
348
|
+
var handleDec = (0, _decorationsDragHandle.dragHandleDecoration)(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
|
|
349
|
+
decorations = decorations.add(newState.doc, [handleDec]);
|
|
350
|
+
}
|
|
351
|
+
if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1')) {
|
|
352
|
+
var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
|
|
353
|
+
var _oldQuickInsertButton = (0, _decorationsQuickInsertButton.findQuickInsertInsertButtonDecoration)(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
|
|
354
|
+
decorations = decorations.remove(_oldQuickInsertButton);
|
|
355
|
+
var quickInsertButton = (0, _decorationsQuickInsertButton.quickInsertButtonDecoration)(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
|
|
356
|
+
decorations = decorations.add(newState.doc, [quickInsertButton]);
|
|
354
357
|
}
|
|
355
|
-
decorations = decorations.add(newState.doc, [handleDec]);
|
|
356
358
|
}
|
|
357
359
|
|
|
358
360
|
// Drop targets may be missing when the node count is being changed during a drag
|
package/dist/cjs/ui/consts.js
CHANGED
|
@@ -4,10 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
4
4
|
Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
|
6
6
|
});
|
|
7
|
-
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = 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 = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
|
|
7
|
+
exports.topPositionAdjustment = exports.spacingBetweenNodesForPreview = exports.spaceLookupMap = exports.rootElementGap = exports.nodeMargins = exports.getNestedNodeLeftPaddingMargin = exports.dropTargetMarginMap = exports.dragHandleGap = exports.QUICK_INSERT_WIDTH = exports.QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_HEIGHT = exports.QUICK_INSERT_DIMENSIONS = exports.DRAG_HANDLE_ZINDEX = exports.DRAG_HANDLE_WIDTH = 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 = exports.BLOCK_MENU_WIDTH = exports.BLOCK_MENU_ENABLED = void 0;
|
|
8
8
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
9
9
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
10
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
11
10
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
11
|
var _dropTargetMarginMap;
|
|
13
12
|
var DRAG_HANDLE_HEIGHT = exports.DRAG_HANDLE_HEIGHT = 24;
|
|
@@ -41,9 +40,10 @@ var QUICK_INSERT_DIMENSIONS = exports.QUICK_INSERT_DIMENSIONS = {
|
|
|
41
40
|
width: QUICK_INSERT_WIDTH,
|
|
42
41
|
height: QUICK_INSERT_HEIGHT
|
|
43
42
|
};
|
|
43
|
+
var QUICK_INSERT_LEFT_OFFSET = exports.QUICK_INSERT_LEFT_OFFSET = 16;
|
|
44
44
|
var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
|
|
45
45
|
var dragHandleGap = exports.dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
|
|
46
|
-
if (nodeType === 'layoutSection'
|
|
46
|
+
if (nodeType === 'layoutSection') {
|
|
47
47
|
return DRAG_HANDLE_DEFAULT_GAP + 20;
|
|
48
48
|
}
|
|
49
49
|
if (parentNodeType && parentNodeType !== 'doc') {
|
|
@@ -58,8 +58,6 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
58
58
|
api = _ref.api,
|
|
59
59
|
formatMessage = _ref.formatMessage,
|
|
60
60
|
getPos = _ref.getPos,
|
|
61
|
-
nodeType = _ref.nodeType,
|
|
62
|
-
anchorName = _ref.anchorName,
|
|
63
61
|
rootAnchorName = _ref.rootAnchorName,
|
|
64
62
|
rootNodeType = _ref.rootNodeType;
|
|
65
63
|
var macroInteractionUpdates = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'featureFlags.macroInteractionUpdates');
|
|
@@ -97,18 +95,17 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
97
95
|
}
|
|
98
96
|
}
|
|
99
97
|
var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
|
|
100
|
-
var neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
|
|
101
98
|
if (supportsAnchor) {
|
|
102
99
|
return {
|
|
103
|
-
left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(
|
|
100
|
+
left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(_consts.QUICK_INSERT_DIMENSIONS.width, "px - ").concat((0, _consts.rootElementGap)(rootNodeType), "px + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
|
|
104
101
|
top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat((0, _consts.topPositionAdjustment)(rootNodeType), "px)")
|
|
105
102
|
};
|
|
106
103
|
}
|
|
107
104
|
return {
|
|
108
|
-
left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(
|
|
105
|
+
left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat((0, _widgetPositions.getLeftPositionForRootElement)(dom, rootNodeType, _consts.QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(_consts.QUICK_INSERT_LEFT_OFFSET, "px)"),
|
|
109
106
|
top: (0, _dragHandlePositions.getTopPosition)(dom, rootNodeType)
|
|
110
107
|
};
|
|
111
|
-
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates
|
|
108
|
+
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
|
|
112
109
|
(0, _react.useEffect)(function () {
|
|
113
110
|
var cleanUpTransitionListener;
|
|
114
111
|
if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
|
|
@@ -181,7 +181,7 @@ const getDecorationAtPos = (decorations, pos, to) => {
|
|
|
181
181
|
return nodeDecAtActivePos;
|
|
182
182
|
};
|
|
183
183
|
export const newApply = (api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) => {
|
|
184
|
-
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
184
|
+
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
185
185
|
let {
|
|
186
186
|
activeNode,
|
|
187
187
|
decorations,
|
|
@@ -312,12 +312,14 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
312
312
|
|
|
313
313
|
// Check if there's a new active node, and it differs from the last
|
|
314
314
|
const activeNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== ((_activeNode = activeNode) === null || _activeNode === void 0 ? void 0 : _activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== ((_activeNode2 = activeNode) === null || _activeNode2 === void 0 ? void 0 : _activeNode2.anchorName) || (meta === null || meta === void 0 ? void 0 : (_meta$activeNode$hand = meta.activeNode.handleOptions) === null || _meta$activeNode$hand === void 0 ? void 0 : _meta$activeNode$hand.isFocused));
|
|
315
|
+
const rootActiveNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootPos) !== ((_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.rootPos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootAnchorName) !== ((_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.rootAnchorName);
|
|
315
316
|
|
|
316
317
|
// Some browsers don't support anchor positioning, meaning we need to replace the handle when nodes change
|
|
317
318
|
const handleNeedsRedraw = shouldRedrawNodeDecs && !isAnchorSupported();
|
|
318
319
|
|
|
319
320
|
// Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
|
|
320
321
|
const shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
322
|
+
const shouldRecreateQuickInsertButton = latestActiveNode && (rootActiveNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
321
323
|
let shouldRemoveHandle = false;
|
|
322
324
|
if (fg('platform_editor_remove_drag_handle_fix')) {
|
|
323
325
|
// If the active node is missing, we need to remove the handle
|
|
@@ -327,29 +329,29 @@ export const newApply = (api, formatMessage, tr, currentState, newState, flags,
|
|
|
327
329
|
shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
|
|
328
330
|
}
|
|
329
331
|
if (shouldRemoveHandle) {
|
|
330
|
-
var
|
|
331
|
-
const oldHandle = findHandleDec(decorations, (
|
|
332
|
+
var _activeNode5, _activeNode6;
|
|
333
|
+
const oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
|
|
332
334
|
decorations = decorations.remove(oldHandle);
|
|
333
335
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
334
336
|
const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations);
|
|
335
337
|
decorations = decorations.remove(oldQuickInsertButton);
|
|
336
338
|
}
|
|
337
|
-
} else if (api
|
|
338
|
-
var
|
|
339
|
-
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
339
|
+
} else if (api) {
|
|
340
|
+
var _latestActiveNode5;
|
|
341
|
+
if (shouldRecreateHandle) {
|
|
342
|
+
var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
|
|
343
|
+
const oldHandle = findHandleDec(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
|
|
344
|
+
decorations = decorations.remove(oldHandle);
|
|
345
|
+
const handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
|
|
346
|
+
decorations = decorations.add(newState.doc, [handleDec]);
|
|
347
|
+
}
|
|
348
|
+
if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
349
|
+
var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
|
|
350
|
+
const oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
|
|
351
|
+
decorations = decorations.remove(oldQuickInsertButton);
|
|
352
|
+
const quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
|
|
353
|
+
decorations = decorations.add(newState.doc, [quickInsertButton]);
|
|
351
354
|
}
|
|
352
|
-
decorations = decorations.add(newState.doc, [handleDec]);
|
|
353
355
|
}
|
|
354
356
|
|
|
355
357
|
// Drop targets may be missing when the node count is being changed during a drag
|
package/dist/es2019/ui/consts.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
|
|
2
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
3
2
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
4
3
|
export const DRAG_HANDLE_HEIGHT = 24;
|
|
5
4
|
export const DRAG_HANDLE_WIDTH = 12;
|
|
@@ -32,9 +31,10 @@ export const QUICK_INSERT_DIMENSIONS = {
|
|
|
32
31
|
width: QUICK_INSERT_WIDTH,
|
|
33
32
|
height: QUICK_INSERT_HEIGHT
|
|
34
33
|
};
|
|
34
|
+
export const QUICK_INSERT_LEFT_OFFSET = 16;
|
|
35
35
|
const nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
|
|
36
36
|
export const dragHandleGap = (nodeType, parentNodeType) => {
|
|
37
|
-
if (nodeType === 'layoutSection'
|
|
37
|
+
if (nodeType === 'layoutSection') {
|
|
38
38
|
return DRAG_HANDLE_DEFAULT_GAP + 20;
|
|
39
39
|
}
|
|
40
40
|
if (parentNodeType && parentNodeType !== 'doc') {
|
|
@@ -9,7 +9,7 @@ import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
|
9
9
|
import Tooltip from '@atlaskit/tooltip';
|
|
10
10
|
import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
|
|
11
11
|
import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
|
|
12
|
-
import {
|
|
12
|
+
import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
|
|
13
13
|
import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
14
14
|
import { createNewLine } from './utils/editor-commands';
|
|
15
15
|
const buttonStyles = xcss({
|
|
@@ -47,8 +47,6 @@ export const TypeAheadControl = ({
|
|
|
47
47
|
api,
|
|
48
48
|
formatMessage,
|
|
49
49
|
getPos,
|
|
50
|
-
nodeType,
|
|
51
|
-
anchorName,
|
|
52
50
|
rootAnchorName,
|
|
53
51
|
rootNodeType
|
|
54
52
|
}) => {
|
|
@@ -84,18 +82,17 @@ export const TypeAheadControl = ({
|
|
|
84
82
|
}
|
|
85
83
|
}
|
|
86
84
|
const isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
|
|
87
|
-
const neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
|
|
88
85
|
if (supportsAnchor) {
|
|
89
86
|
return {
|
|
90
|
-
left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} +
|
|
87
|
+
left: isEdgeCase ? `calc(anchor(${rootAnchorName} start) + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(anchor(${rootAnchorName} start) - ${QUICK_INSERT_DIMENSIONS.width}px - ${rootElementGap(rootNodeType)}px + -${QUICK_INSERT_LEFT_OFFSET}px)`,
|
|
91
88
|
top: `calc(anchor(${rootAnchorName} start) + ${topPositionAdjustment(rootNodeType)}px)`
|
|
92
89
|
};
|
|
93
90
|
}
|
|
94
91
|
return {
|
|
95
|
-
left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} +
|
|
92
|
+
left: isEdgeCase ? `calc(${(dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0}px + ${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)` : `calc(${getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates)} + -${QUICK_INSERT_LEFT_OFFSET}px)`,
|
|
96
93
|
top: getTopPosition(dom, rootNodeType)
|
|
97
94
|
};
|
|
98
|
-
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates
|
|
95
|
+
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
|
|
99
96
|
useEffect(() => {
|
|
100
97
|
let cleanUpTransitionListener;
|
|
101
98
|
if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
|
|
@@ -180,7 +180,7 @@ var getDecorationAtPos = function getDecorationAtPos(decorations, pos, to) {
|
|
|
180
180
|
return nodeDecAtActivePos;
|
|
181
181
|
};
|
|
182
182
|
export var newApply = function newApply(api, formatMessage, tr, currentState, newState, flags, nodeViewPortalProviderAPI, anchorRectCache) {
|
|
183
|
-
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
183
|
+
var _meta$multiSelectDnD, _activeNode, _activeNode2, _meta$activeNode$hand, _activeNode3, _activeNode4, _meta$isDragging, _latestActiveNode11, _latestActiveNode12, _meta$isDragging2, _meta$toggleMenu, _meta$editorHeight, _meta$editorWidthLeft, _meta$editorWidthRigh, _meta$isPMDragging, _meta$isShiftDown, _meta$lastDragCancell;
|
|
184
184
|
var activeNode = currentState.activeNode,
|
|
185
185
|
decorations = currentState.decorations,
|
|
186
186
|
isResizerResizing = currentState.isResizerResizing,
|
|
@@ -308,12 +308,14 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
308
308
|
|
|
309
309
|
// Check if there's a new active node, and it differs from the last
|
|
310
310
|
var activeNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && ((meta === null || meta === void 0 ? void 0 : meta.activeNode.pos) !== ((_activeNode = activeNode) === null || _activeNode === void 0 ? void 0 : _activeNode.pos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.anchorName) !== ((_activeNode2 = activeNode) === null || _activeNode2 === void 0 ? void 0 : _activeNode2.anchorName) || (meta === null || meta === void 0 || (_meta$activeNode$hand = meta.activeNode.handleOptions) === null || _meta$activeNode$hand === void 0 ? void 0 : _meta$activeNode$hand.isFocused));
|
|
311
|
+
var rootActiveNodeChanged = (meta === null || meta === void 0 ? void 0 : meta.activeNode) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootPos) !== ((_activeNode3 = activeNode) === null || _activeNode3 === void 0 ? void 0 : _activeNode3.rootPos) && (meta === null || meta === void 0 ? void 0 : meta.activeNode.rootAnchorName) !== ((_activeNode4 = activeNode) === null || _activeNode4 === void 0 ? void 0 : _activeNode4.rootAnchorName);
|
|
311
312
|
|
|
312
313
|
// Some browsers don't support anchor positioning, meaning we need to replace the handle when nodes change
|
|
313
314
|
var handleNeedsRedraw = shouldRedrawNodeDecs && !isAnchorSupported();
|
|
314
315
|
|
|
315
316
|
// Create/recreate handle dec when the active node is missing/changes, or the editor viewport has changed (non-anchor pos workaround)
|
|
316
317
|
var shouldRecreateHandle = latestActiveNode && (activeNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
318
|
+
var shouldRecreateQuickInsertButton = latestActiveNode && (rootActiveNodeChanged || isActiveNodeModified || editorSizeChanged || handleNeedsRedraw);
|
|
317
319
|
var shouldRemoveHandle = false;
|
|
318
320
|
if (fg('platform_editor_remove_drag_handle_fix')) {
|
|
319
321
|
// If the active node is missing, we need to remove the handle
|
|
@@ -323,29 +325,29 @@ export var newApply = function newApply(api, formatMessage, tr, currentState, ne
|
|
|
323
325
|
shouldRemoveHandle = latestActiveNode && (isResizerResizing || isActiveNodeDeleted || (meta === null || meta === void 0 ? void 0 : meta.nodeMoved));
|
|
324
326
|
}
|
|
325
327
|
if (shouldRemoveHandle) {
|
|
326
|
-
var
|
|
327
|
-
var oldHandle = findHandleDec(decorations, (
|
|
328
|
+
var _activeNode5, _activeNode6;
|
|
329
|
+
var oldHandle = findHandleDec(decorations, (_activeNode5 = activeNode) === null || _activeNode5 === void 0 ? void 0 : _activeNode5.pos, (_activeNode6 = activeNode) === null || _activeNode6 === void 0 ? void 0 : _activeNode6.pos);
|
|
328
330
|
decorations = decorations.remove(oldHandle);
|
|
329
331
|
if (editorExperiment('platform_editor_controls', 'variant1')) {
|
|
330
332
|
var oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations);
|
|
331
333
|
decorations = decorations.remove(oldQuickInsertButton);
|
|
332
334
|
}
|
|
333
|
-
} else if (api
|
|
334
|
-
var
|
|
335
|
-
|
|
336
|
-
|
|
337
|
-
|
|
338
|
-
|
|
339
|
-
var
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
335
|
+
} else if (api) {
|
|
336
|
+
var _latestActiveNode5;
|
|
337
|
+
if (shouldRecreateHandle) {
|
|
338
|
+
var _activeNode7, _activeNode8, _latestActiveNode, _latestActiveNode2, _latestActiveNode3, _latestActiveNode4;
|
|
339
|
+
var _oldHandle = findHandleDec(decorations, (_activeNode7 = activeNode) === null || _activeNode7 === void 0 ? void 0 : _activeNode7.pos, (_activeNode8 = activeNode) === null || _activeNode8 === void 0 ? void 0 : _activeNode8.pos);
|
|
340
|
+
decorations = decorations.remove(_oldHandle);
|
|
341
|
+
var handleDec = dragHandleDecoration(api, formatMessage, (_latestActiveNode = latestActiveNode) === null || _latestActiveNode === void 0 ? void 0 : _latestActiveNode.pos, (_latestActiveNode2 = latestActiveNode) === null || _latestActiveNode2 === void 0 ? void 0 : _latestActiveNode2.anchorName, (_latestActiveNode3 = latestActiveNode) === null || _latestActiveNode3 === void 0 ? void 0 : _latestActiveNode3.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode4 = latestActiveNode) === null || _latestActiveNode4 === void 0 ? void 0 : _latestActiveNode4.handleOptions);
|
|
342
|
+
decorations = decorations.add(newState.doc, [handleDec]);
|
|
343
|
+
}
|
|
344
|
+
if (shouldRecreateQuickInsertButton && ((_latestActiveNode5 = latestActiveNode) === null || _latestActiveNode5 === void 0 ? void 0 : _latestActiveNode5.rootPos) !== undefined && editorExperiment('platform_editor_controls', 'variant1')) {
|
|
345
|
+
var _activeNode9, _activeNode10, _latestActiveNode6, _latestActiveNode7, _latestActiveNode8, _latestActiveNode9, _latestActiveNode10;
|
|
346
|
+
var _oldQuickInsertButton = findQuickInsertInsertButtonDecoration(decorations, (_activeNode9 = activeNode) === null || _activeNode9 === void 0 ? void 0 : _activeNode9.rootPos, (_activeNode10 = activeNode) === null || _activeNode10 === void 0 ? void 0 : _activeNode10.rootPos);
|
|
347
|
+
decorations = decorations.remove(_oldQuickInsertButton);
|
|
348
|
+
var quickInsertButton = quickInsertButtonDecoration(api, formatMessage, (_latestActiveNode6 = latestActiveNode) === null || _latestActiveNode6 === void 0 ? void 0 : _latestActiveNode6.rootPos, (_latestActiveNode7 = latestActiveNode) === null || _latestActiveNode7 === void 0 ? void 0 : _latestActiveNode7.anchorName, (_latestActiveNode8 = latestActiveNode) === null || _latestActiveNode8 === void 0 ? void 0 : _latestActiveNode8.nodeType, nodeViewPortalProviderAPI, (_latestActiveNode9 = latestActiveNode) === null || _latestActiveNode9 === void 0 ? void 0 : _latestActiveNode9.rootAnchorName, (_latestActiveNode10 = latestActiveNode) === null || _latestActiveNode10 === void 0 ? void 0 : _latestActiveNode10.rootNodeType);
|
|
349
|
+
decorations = decorations.add(newState.doc, [quickInsertButton]);
|
|
347
350
|
}
|
|
348
|
-
decorations = decorations.add(newState.doc, [handleDec]);
|
|
349
351
|
}
|
|
350
352
|
|
|
351
353
|
// Drop targets may be missing when the node count is being changed during a drag
|
package/dist/esm/ui/consts.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
2
|
var _dropTargetMarginMap;
|
|
3
3
|
import { akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
|
|
4
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
5
4
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
6
5
|
export var DRAG_HANDLE_HEIGHT = 24;
|
|
7
6
|
export var DRAG_HANDLE_WIDTH = 12;
|
|
@@ -34,9 +33,10 @@ export var QUICK_INSERT_DIMENSIONS = {
|
|
|
34
33
|
width: QUICK_INSERT_WIDTH,
|
|
35
34
|
height: QUICK_INSERT_HEIGHT
|
|
36
35
|
};
|
|
36
|
+
export var QUICK_INSERT_LEFT_OFFSET = 16;
|
|
37
37
|
var nodeTypeExcludeList = ['embedCard', 'mediaSingle', 'table'];
|
|
38
38
|
export var dragHandleGap = function dragHandleGap(nodeType, parentNodeType) {
|
|
39
|
-
if (nodeType === 'layoutSection'
|
|
39
|
+
if (nodeType === 'layoutSection') {
|
|
40
40
|
return DRAG_HANDLE_DEFAULT_GAP + 20;
|
|
41
41
|
}
|
|
42
42
|
if (parentNodeType && parentNodeType !== 'doc') {
|
|
@@ -10,7 +10,7 @@ import { Box, Pressable, xcss } from '@atlaskit/primitives';
|
|
|
10
10
|
import Tooltip from '@atlaskit/tooltip';
|
|
11
11
|
import { getTopPosition } from '../pm-plugins/utils/drag-handle-positions';
|
|
12
12
|
import { getLeftPositionForRootElement } from '../pm-plugins/utils/widget-positions';
|
|
13
|
-
import {
|
|
13
|
+
import { rootElementGap, topPositionAdjustment, QUICK_INSERT_DIMENSIONS, QUICK_INSERT_LEFT_OFFSET } from './consts';
|
|
14
14
|
import { isNestedNodeSelected, isNonEditableBlock, isSelectionInNode } from './utils/document-checks';
|
|
15
15
|
import { createNewLine } from './utils/editor-commands';
|
|
16
16
|
var buttonStyles = xcss({
|
|
@@ -48,8 +48,6 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
48
48
|
api = _ref.api,
|
|
49
49
|
formatMessage = _ref.formatMessage,
|
|
50
50
|
getPos = _ref.getPos,
|
|
51
|
-
nodeType = _ref.nodeType,
|
|
52
|
-
anchorName = _ref.anchorName,
|
|
53
51
|
rootAnchorName = _ref.rootAnchorName,
|
|
54
52
|
rootNodeType = _ref.rootNodeType;
|
|
55
53
|
var macroInteractionUpdates = useSharedPluginStateSelector(api, 'featureFlags.macroInteractionUpdates');
|
|
@@ -87,18 +85,17 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
87
85
|
}
|
|
88
86
|
}
|
|
89
87
|
var isEdgeCase = (hasResizer || isExtension || isEmbedCard || isBlockCard) && innerContainer;
|
|
90
|
-
var neighboringWidthOffset = anchorName === rootAnchorName ? '-16px' : '0px';
|
|
91
88
|
if (supportsAnchor) {
|
|
92
89
|
return {
|
|
93
|
-
left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(
|
|
90
|
+
left: isEdgeCase ? "calc(anchor(".concat(rootAnchorName, " start) + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(anchor(".concat(rootAnchorName, " start) - ").concat(QUICK_INSERT_DIMENSIONS.width, "px - ").concat(rootElementGap(rootNodeType), "px + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
|
|
94
91
|
top: "calc(anchor(".concat(rootAnchorName, " start) + ").concat(topPositionAdjustment(rootNodeType), "px)")
|
|
95
92
|
};
|
|
96
93
|
}
|
|
97
94
|
return {
|
|
98
|
-
left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + ").concat(
|
|
95
|
+
left: isEdgeCase ? "calc(".concat((dom === null || dom === void 0 ? void 0 : dom.offsetLeft) || 0, "px + ").concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)") : "calc(".concat(getLeftPositionForRootElement(dom, rootNodeType, QUICK_INSERT_DIMENSIONS, innerContainer, isMacroInteractionUpdates), " + -").concat(QUICK_INSERT_LEFT_OFFSET, "px)"),
|
|
99
96
|
top: getTopPosition(dom, rootNodeType)
|
|
100
97
|
};
|
|
101
|
-
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates
|
|
98
|
+
}, [rootAnchorName, view.dom, rootNodeType, macroInteractionUpdates]);
|
|
102
99
|
useEffect(function () {
|
|
103
100
|
var cleanUpTransitionListener;
|
|
104
101
|
if (rootNodeType === 'extension' || rootNodeType === 'embedCard') {
|
|
@@ -28,6 +28,7 @@ export declare const QUICK_INSERT_DIMENSIONS: {
|
|
|
28
28
|
width: number;
|
|
29
29
|
height: number;
|
|
30
30
|
};
|
|
31
|
+
export declare const QUICK_INSERT_LEFT_OFFSET = 16;
|
|
31
32
|
export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
|
|
32
33
|
export declare const rootElementGap: (nodeType: string) => number;
|
|
33
34
|
export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
|
|
@@ -13,5 +13,5 @@ type Props = {
|
|
|
13
13
|
rootAnchorName?: string;
|
|
14
14
|
rootNodeType: string;
|
|
15
15
|
};
|
|
16
|
-
export declare const TypeAheadControl: ({ view, api, formatMessage, getPos,
|
|
16
|
+
export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
|
|
17
17
|
export {};
|
|
@@ -28,6 +28,7 @@ export declare const QUICK_INSERT_DIMENSIONS: {
|
|
|
28
28
|
width: number;
|
|
29
29
|
height: number;
|
|
30
30
|
};
|
|
31
|
+
export declare const QUICK_INSERT_LEFT_OFFSET = 16;
|
|
31
32
|
export declare const dragHandleGap: (nodeType: string, parentNodeType?: string) => number;
|
|
32
33
|
export declare const rootElementGap: (nodeType: string) => number;
|
|
33
34
|
export declare const getNestedNodeLeftPaddingMargin: (nodeType?: string) => "8px" | "16px" | "20px" | "24px" | "28px" | "40px";
|
|
@@ -13,5 +13,5 @@ type Props = {
|
|
|
13
13
|
rootAnchorName?: string;
|
|
14
14
|
rootNodeType: string;
|
|
15
15
|
};
|
|
16
|
-
export declare const TypeAheadControl: ({ view, api, formatMessage, getPos,
|
|
16
|
+
export declare const TypeAheadControl: ({ view, api, formatMessage, getPos, rootAnchorName, rootNodeType, }: Props) => React.JSX.Element;
|
|
17
17
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/editor-plugin-block-controls",
|
|
3
|
-
"version": "3.3.
|
|
3
|
+
"version": "3.3.18",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -122,9 +122,6 @@
|
|
|
122
122
|
"platform_editor_use_nested_table_pm_nodes": {
|
|
123
123
|
"type": "boolean"
|
|
124
124
|
},
|
|
125
|
-
"platform_editor_advanced_layouts_post_fix_patch_2": {
|
|
126
|
-
"type": "boolean"
|
|
127
|
-
},
|
|
128
125
|
"platform_editor_advanced_layouts_post_fix_patch_3": {
|
|
129
126
|
"type": "boolean"
|
|
130
127
|
},
|