@atlaskit/editor-plugin-block-controls 3.3.17 → 3.3.19
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 +19 -0
- package/dist/cjs/pm-plugins/main.js +20 -18
- package/dist/cjs/ui/drag-handle.js +7 -1
- package/dist/cjs/ui/quick-insert-button.js +3 -3
- package/dist/es2019/pm-plugins/main.js +20 -18
- package/dist/es2019/ui/drag-handle.js +7 -1
- package/dist/es2019/ui/quick-insert-button.js +3 -3
- package/dist/esm/pm-plugins/main.js +20 -18
- package/dist/esm/ui/drag-handle.js +7 -1
- package/dist/esm/ui/quick-insert-button.js +3 -3
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,24 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 3.3.19
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#128787](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128787)
|
|
8
|
+
[`8d3d8163602e9`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8d3d8163602e9) -
|
|
9
|
+
use color.icon.subtle pallette for both block control widgets, which includes drag handle and
|
|
10
|
+
quick insert
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
13
|
+
## 3.3.18
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#128661](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128661)
|
|
18
|
+
[`4e5d4eee96907`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/4e5d4eee96907) -
|
|
19
|
+
Add validation when recreating quick insert button, avoid recreating when root node is stable
|
|
20
|
+
- Updated dependencies
|
|
21
|
+
|
|
3
22
|
## 3.3.17
|
|
4
23
|
|
|
5
24
|
### 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
|
|
@@ -43,6 +43,11 @@ var iconWrapperStyles = (0, _primitives.xcss)({
|
|
|
43
43
|
justifyContent: 'center',
|
|
44
44
|
alignItems: 'center'
|
|
45
45
|
});
|
|
46
|
+
|
|
47
|
+
// update color to match quick insert button for new editor controls
|
|
48
|
+
var dragHandleColor = (0, _react2.css)({
|
|
49
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
50
|
+
});
|
|
46
51
|
var dragHandleButtonStyles = (0, _react2.css)({
|
|
47
52
|
position: 'absolute',
|
|
48
53
|
padding: "var(--ds-space-025, 2px)".concat(" 0"),
|
|
@@ -59,6 +64,7 @@ var dragHandleButtonStyles = (0, _react2.css)({
|
|
|
59
64
|
background: 'transparent',
|
|
60
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
61
66
|
borderRadius: _consts.DRAG_HANDLE_BORDER_RADIUS,
|
|
67
|
+
// when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
|
|
62
68
|
color: "var(--ds-icon, #44546F)",
|
|
63
69
|
cursor: 'grab',
|
|
64
70
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -632,7 +638,7 @@ var DragHandle = exports.DragHandle = function DragHandle(_ref) {
|
|
|
632
638
|
// eslint-disable-next-line @atlaskit/design-system/no-html-button
|
|
633
639
|
(0, _react2.jsx)("button", {
|
|
634
640
|
type: "button",
|
|
635
|
-
css: [dragHandleButtonStyles,
|
|
641
|
+
css: [dragHandleButtonStyles, (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
636
642
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
637
643
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
638
644
|
_browser.browser.gecko && (0, _platformFeatureFlags.fg)('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, (0, _experiments.editorExperiment)('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
|
|
@@ -37,10 +37,10 @@ var buttonStyles = (0, _primitives.xcss)({
|
|
|
37
37
|
zIndex: 'card',
|
|
38
38
|
outline: 'none',
|
|
39
39
|
':hover': {
|
|
40
|
-
backgroundColor: 'color.background.neutral.hovered'
|
|
40
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
41
41
|
},
|
|
42
42
|
':active': {
|
|
43
|
-
backgroundColor: 'color.background.neutral.pressed'
|
|
43
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
44
44
|
},
|
|
45
45
|
':focus': {
|
|
46
46
|
outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
|
|
@@ -179,7 +179,7 @@ var TypeAheadControl = exports.TypeAheadControl = function TypeAheadControl(_ref
|
|
|
179
179
|
onClick: handleQuickInsert
|
|
180
180
|
}, /*#__PURE__*/_react.default.createElement(_add.default, {
|
|
181
181
|
label: "add",
|
|
182
|
-
color: "var(--ds-icon, #
|
|
182
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
183
183
|
}))))
|
|
184
184
|
);
|
|
185
185
|
};
|
|
@@ -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
|
|
@@ -35,6 +35,11 @@ const iconWrapperStyles = xcss({
|
|
|
35
35
|
justifyContent: 'center',
|
|
36
36
|
alignItems: 'center'
|
|
37
37
|
});
|
|
38
|
+
|
|
39
|
+
// update color to match quick insert button for new editor controls
|
|
40
|
+
const dragHandleColor = css({
|
|
41
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
42
|
+
});
|
|
38
43
|
const dragHandleButtonStyles = css({
|
|
39
44
|
position: 'absolute',
|
|
40
45
|
padding: `${"var(--ds-space-025, 2px)"} 0`,
|
|
@@ -51,6 +56,7 @@ const dragHandleButtonStyles = css({
|
|
|
51
56
|
background: 'transparent',
|
|
52
57
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
53
58
|
borderRadius: DRAG_HANDLE_BORDER_RADIUS,
|
|
59
|
+
// when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
|
|
54
60
|
color: "var(--ds-icon, #44546F)",
|
|
55
61
|
cursor: 'grab',
|
|
56
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -617,7 +623,7 @@ export const DragHandle = ({
|
|
|
617
623
|
// eslint-disable-next-line @atlaskit/design-system/no-html-button
|
|
618
624
|
jsx("button", {
|
|
619
625
|
type: "button",
|
|
620
|
-
css: [dragHandleButtonStyles,
|
|
626
|
+
css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
621
627
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
622
628
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
623
629
|
browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
|
|
@@ -26,10 +26,10 @@ const buttonStyles = xcss({
|
|
|
26
26
|
zIndex: 'card',
|
|
27
27
|
outline: 'none',
|
|
28
28
|
':hover': {
|
|
29
|
-
backgroundColor: 'color.background.neutral.hovered'
|
|
29
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
30
30
|
},
|
|
31
31
|
':active': {
|
|
32
|
-
backgroundColor: 'color.background.neutral.pressed'
|
|
32
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
33
33
|
},
|
|
34
34
|
':focus': {
|
|
35
35
|
outline: `2px solid ${"var(--ds-border-focused, #388BFF)"}`
|
|
@@ -167,7 +167,7 @@ export const TypeAheadControl = ({
|
|
|
167
167
|
onClick: handleQuickInsert
|
|
168
168
|
}, /*#__PURE__*/React.createElement(AddIcon, {
|
|
169
169
|
label: "add",
|
|
170
|
-
color: "var(--ds-icon, #
|
|
170
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
171
171
|
}))))
|
|
172
172
|
);
|
|
173
173
|
};
|
|
@@ -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
|
|
@@ -40,6 +40,11 @@ var iconWrapperStyles = xcss({
|
|
|
40
40
|
justifyContent: 'center',
|
|
41
41
|
alignItems: 'center'
|
|
42
42
|
});
|
|
43
|
+
|
|
44
|
+
// update color to match quick insert button for new editor controls
|
|
45
|
+
var dragHandleColor = css({
|
|
46
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
47
|
+
});
|
|
43
48
|
var dragHandleButtonStyles = css({
|
|
44
49
|
position: 'absolute',
|
|
45
50
|
padding: "var(--ds-space-025, 2px)".concat(" 0"),
|
|
@@ -56,6 +61,7 @@ var dragHandleButtonStyles = css({
|
|
|
56
61
|
background: 'transparent',
|
|
57
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
58
63
|
borderRadius: DRAG_HANDLE_BORDER_RADIUS,
|
|
64
|
+
// when platform_editor_controls is enabled, the drag handle color is overridden. Update color here when experiment is cleaned up.
|
|
59
65
|
color: "var(--ds-icon, #44546F)",
|
|
60
66
|
cursor: 'grab',
|
|
61
67
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
@@ -629,7 +635,7 @@ export var DragHandle = function DragHandle(_ref) {
|
|
|
629
635
|
// eslint-disable-next-line @atlaskit/design-system/no-html-button
|
|
630
636
|
jsx("button", {
|
|
631
637
|
type: "button",
|
|
632
|
-
css: [dragHandleButtonStyles,
|
|
638
|
+
css: [dragHandleButtonStyles, editorExperiment('platform_editor_controls', 'variant1') && dragHandleColor,
|
|
633
639
|
// ED-26266: Fixed the drag handle highlight when selecting multiple line in Firefox
|
|
634
640
|
// See https://product-fabric.atlassian.net/browse/ED-26266
|
|
635
641
|
browser.gecko && fg('platform_editor_dnd_handle_highlight_fix_firefox') && dragHandleMultiLineSelectionFixFirefox, editorExperiment('advanced_layouts', true) && isLayoutColumn && layoutColumnDragHandleStyles, dragHandleSelected && selectedStyles],
|
|
@@ -27,10 +27,10 @@ var buttonStyles = xcss({
|
|
|
27
27
|
zIndex: 'card',
|
|
28
28
|
outline: 'none',
|
|
29
29
|
':hover': {
|
|
30
|
-
backgroundColor: 'color.background.neutral.hovered'
|
|
30
|
+
backgroundColor: 'color.background.neutral.subtle.hovered'
|
|
31
31
|
},
|
|
32
32
|
':active': {
|
|
33
|
-
backgroundColor: 'color.background.neutral.pressed'
|
|
33
|
+
backgroundColor: 'color.background.neutral.subtle.pressed'
|
|
34
34
|
},
|
|
35
35
|
':focus': {
|
|
36
36
|
outline: "2px solid ".concat("var(--ds-border-focused, #388BFF)")
|
|
@@ -169,7 +169,7 @@ export var TypeAheadControl = function TypeAheadControl(_ref) {
|
|
|
169
169
|
onClick: handleQuickInsert
|
|
170
170
|
}, /*#__PURE__*/React.createElement(AddIcon, {
|
|
171
171
|
label: "add",
|
|
172
|
-
color: "var(--ds-icon, #
|
|
172
|
+
color: "var(--ds-icon-subtle, #626F86)"
|
|
173
173
|
}))))
|
|
174
174
|
);
|
|
175
175
|
};
|
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.19",
|
|
4
4
|
"description": "Block controls plugin for @atlaskit/editor-core",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@atlaskit/adf-schema": "^47.6.0",
|
|
36
|
-
"@atlaskit/editor-common": "^102.
|
|
36
|
+
"@atlaskit/editor-common": "^102.11.0",
|
|
37
37
|
"@atlaskit/editor-plugin-accessibility-utils": "^2.0.0",
|
|
38
38
|
"@atlaskit/editor-plugin-analytics": "^2.2.0",
|
|
39
39
|
"@atlaskit/editor-plugin-editor-disabled": "^2.0.0",
|