@atlaskit/editor-plugin-block-controls 7.8.0 → 7.9.0
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
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/editor-plugin-block-controls
|
|
2
2
|
|
|
3
|
+
## 7.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`b168fe8504b3d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b168fe8504b3d) -
|
|
8
|
+
ED-29688 update dragging native anchor styles
|
|
9
|
+
|
|
3
10
|
## 7.8.0
|
|
4
11
|
|
|
5
12
|
### Minor Changes
|
|
@@ -431,6 +431,35 @@ var dragHandlerAnchorStyles = (0, _react.css)({
|
|
|
431
431
|
}
|
|
432
432
|
}
|
|
433
433
|
});
|
|
434
|
+
|
|
435
|
+
// Styles applied to nodes with anchors when dragging
|
|
436
|
+
var dragAnchorStyles = (0, _react.css)({
|
|
437
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
438
|
+
'.ProseMirror': {
|
|
439
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
440
|
+
'[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
|
|
441
|
+
// all top level nodes with anchor
|
|
442
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
443
|
+
anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
444
|
+
},
|
|
445
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
446
|
+
'[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
|
|
447
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
448
|
+
anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
449
|
+
},
|
|
450
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
451
|
+
'[data-prosemirror-node-name="media"][data-node-anchor]': {
|
|
452
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
453
|
+
anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
454
|
+
},
|
|
455
|
+
// first table row to avoid multiple anchors in table
|
|
456
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
457
|
+
'[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
|
|
458
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
459
|
+
anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
});
|
|
434
463
|
var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
|
|
435
464
|
var api = _ref.api;
|
|
436
465
|
var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
|
|
@@ -443,6 +472,6 @@ var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWra
|
|
|
443
472
|
exposure: true
|
|
444
473
|
}) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
|
|
445
474
|
// platform_editor_controls note: this allows drag handles to render on empty lines
|
|
446
|
-
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ?
|
|
475
|
+
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, (0, _experiments.editorExperiment)('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, (0, _experiments.editorExperiment)('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _expValEquals.expValEquals)('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
|
|
447
476
|
});
|
|
448
477
|
};
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
*/
|
|
5
5
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
6
6
|
import { css, Global, jsx } from '@emotion/react';
|
|
7
|
-
import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported,
|
|
7
|
+
import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
|
|
8
8
|
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
|
|
9
9
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
10
10
|
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
@@ -509,6 +509,35 @@ const dragHandlerAnchorStyles = css({
|
|
|
509
509
|
}
|
|
510
510
|
}
|
|
511
511
|
});
|
|
512
|
+
|
|
513
|
+
// Styles applied to nodes with anchors when dragging
|
|
514
|
+
const dragAnchorStyles = css({
|
|
515
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
516
|
+
'.ProseMirror': {
|
|
517
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
518
|
+
'[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
|
|
519
|
+
// all top level nodes with anchor
|
|
520
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
521
|
+
anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
|
|
522
|
+
},
|
|
523
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
524
|
+
'[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
|
|
525
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
526
|
+
anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
|
|
527
|
+
},
|
|
528
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
529
|
+
'[data-prosemirror-node-name="media"][data-node-anchor]': {
|
|
530
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
531
|
+
anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
|
|
532
|
+
},
|
|
533
|
+
// first table row to avoid multiple anchors in table
|
|
534
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
535
|
+
'[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
|
|
536
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
537
|
+
anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
|
|
538
|
+
}
|
|
539
|
+
}
|
|
540
|
+
});
|
|
512
541
|
export const GlobalStylesWrapper = ({
|
|
513
542
|
api
|
|
514
543
|
}) => {
|
|
@@ -522,6 +551,6 @@ export const GlobalStylesWrapper = ({
|
|
|
522
551
|
exposure: true
|
|
523
552
|
}) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
|
|
524
553
|
// platform_editor_controls note: this allows drag handles to render on empty lines
|
|
525
|
-
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ?
|
|
554
|
+
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
|
|
526
555
|
});
|
|
527
556
|
};
|
|
@@ -5,7 +5,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
5
5
|
*/
|
|
6
6
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-global-styles, @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
7
|
import { css, Global, jsx } from '@emotion/react';
|
|
8
|
-
import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported,
|
|
8
|
+
import { ANCHOR_VARIABLE_NAME, DRAG_HANDLE_WIDTH, isCSSAnchorSupported, tableControlsSpacing } from '@atlaskit/editor-common/styles';
|
|
9
9
|
import { areToolbarFlagsEnabled } from '@atlaskit/editor-common/toolbar-flag-check';
|
|
10
10
|
import { useSharedPluginStateSelector } from '@atlaskit/editor-common/use-shared-plugin-state-selector';
|
|
11
11
|
import { ZERO_WIDTH_SPACE } from '@atlaskit/editor-common/whitespace';
|
|
@@ -424,6 +424,35 @@ var dragHandlerAnchorStyles = css({
|
|
|
424
424
|
}
|
|
425
425
|
}
|
|
426
426
|
});
|
|
427
|
+
|
|
428
|
+
// Styles applied to nodes with anchors when dragging
|
|
429
|
+
var dragAnchorStyles = css({
|
|
430
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
431
|
+
'.ProseMirror': {
|
|
432
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
433
|
+
'[data-node-anchor]:not([data-node-anchor] [data-node-anchor])': {
|
|
434
|
+
// all top level nodes with anchor
|
|
435
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
436
|
+
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
437
|
+
},
|
|
438
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
439
|
+
'[data-node-anchor]:has([data-blocks-drop-target-container]) [data-node-anchor]': {
|
|
440
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
441
|
+
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
442
|
+
},
|
|
443
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
|
|
444
|
+
'[data-prosemirror-node-name="media"][data-node-anchor]': {
|
|
445
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
446
|
+
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
447
|
+
},
|
|
448
|
+
// first table row to avoid multiple anchors in table
|
|
449
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
450
|
+
'[data-prosemirror-node-name="table"] [data-prosemirror-node-name="tableRow"][data-node-anchor]:first-of-type': {
|
|
451
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
|
|
452
|
+
anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
|
|
453
|
+
}
|
|
454
|
+
}
|
|
455
|
+
});
|
|
427
456
|
export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
|
|
428
457
|
var api = _ref.api;
|
|
429
458
|
var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
|
|
@@ -436,6 +465,6 @@ export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
|
|
|
436
465
|
exposure: true
|
|
437
466
|
}) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
|
|
438
467
|
// platform_editor_controls note: this allows drag handles to render on empty lines
|
|
439
|
-
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ?
|
|
468
|
+
toolbarFlagsEnabled ? undefined : withInlineNodeStyle, editorExperiment('platform_editor_block_control_optimise_render', true) ? quickInsertStyles : undefined, withDeleteLinesStyleFix, withMediaSingleStyleFix, legacyBreakoutWideLayoutStyle, headingWithIndentationInLayoutStyleFix, editorExperiment('advanced_layouts', true) ? blockCardWithoutLayout : undefined, withDividerInPanelStyleFix, withFormatInLayoutStyleFix, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withRelativePosStyleNext : withRelativePosStyle, topLevelNodeMarginStyles, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? withAnchorNameZindexStyleNext : withAnchorNameZindexStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && expValEquals('advanced_layouts', 'isEnabled', true) ? layoutColumnExtendedHoverZone : layoutColumnWithoutHoverZone, shouldRenderAnchors && (isDragging ? dragAnchorStyles : dragHandlerAnchorStyles)]
|
|
440
469
|
});
|
|
441
470
|
};
|