@atlaskit/editor-plugin-block-controls 7.7.9 → 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.
Files changed (5) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/dist/cjs/ui/global-styles.js +57 -1
  3. package/dist/es2019/ui/global-styles.js +59 -3
  4. package/dist/esm/ui/global-styles.js +59 -3
  5. package/package.json +7 -4
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
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
+
10
+ ## 7.8.0
11
+
12
+ ### Minor Changes
13
+
14
+ - [`54f21810515c4`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/54f21810515c4) -
15
+ ED-29642 use native anchor global css style instead of inline style
16
+
17
+ ### Patch Changes
18
+
19
+ - Updated dependencies
20
+
3
21
  ## 7.7.9
4
22
 
5
23
  ### Patch Changes
package/dist/cjs/ui/global-styles.js CHANGED
@@ -12,6 +12,7 @@ var _toolbarFlagCheck = require("@atlaskit/editor-common/toolbar-flag-check");
12
12
  var _useSharedPluginStateSelector = require("@atlaskit/editor-common/use-shared-plugin-state-selector");
13
13
  var _whitespace = require("@atlaskit/editor-common/whitespace");
14
14
  var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
15
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
16
  var _constants = require("@atlaskit/theme/constants");
16
17
  var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
17
18
  var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
@@ -405,17 +406,72 @@ var blockCardWithoutLayout = (0, _react.css)({
405
406
  '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
406
407
  }
407
408
  });
409
+ var dragHandlerAnchorStyles = (0, _react.css)({
410
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
411
+ '.ProseMirror': {
412
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
413
+ '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
414
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
415
+ anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
416
+ },
417
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
418
+ '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
419
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
420
+ anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
421
+ },
422
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
423
+ '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
424
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
425
+ anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
426
+ },
427
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
428
+ '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
429
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
430
+ anchorName: "var(".concat(_styles.ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
431
+ }
432
+ }
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
+ });
408
463
  var GlobalStylesWrapper = exports.GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
409
464
  var api = _ref.api;
410
465
  var isDragging = (0, _useSharedPluginStateSelector.useSharedPluginStateSelector)(api, 'blockControls.isDragging', {
411
466
  disabled: !(0, _expValEquals.expValEquals)('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
412
467
  });
468
+ var shouldRenderAnchors = (0, _styles.isCSSAnchorSupported)() && (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) && (0, _platformFeatureFlags.fg)('platform_native_anchor_use_css_style');
413
469
  var toolbarFlagsEnabled = (0, _toolbarFlagCheck.areToolbarFlagsEnabled)(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
414
470
  return (0, _react.jsx)(_react.Global, {
415
471
  styles: [globalStyles(), globalDnDStyle, (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && ((0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), (0, _experiments.editorExperiment)('platform_editor_preview_panel_responsiveness', true, {
416
472
  exposure: true
417
473
  }) ? (0, _expValEquals.expValEquals)('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
418
474
  // platform_editor_controls note: this allows drag handles to render on empty lines
419
- 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]
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)]
420
476
  });
421
477
  };
package/dist/es2019/ui/global-styles.js CHANGED
@@ -4,11 +4,12 @@
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 { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
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';
11
- import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
11
+ import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
12
13
  import { layers } from '@atlaskit/theme/constants';
13
14
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
14
15
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -483,18 +484,73 @@ const blockCardWithoutLayout = css({
483
484
  '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
484
485
  }
485
486
  });
487
+ const dragHandlerAnchorStyles = css({
488
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
489
+ '.ProseMirror': {
490
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
491
+ '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
492
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
493
+ anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
494
+ },
495
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
496
+ '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
497
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
498
+ anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
499
+ },
500
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
501
+ '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
502
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
503
+ anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
504
+ },
505
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
506
+ '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
507
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
508
+ anchorName: `var(${ANCHOR_VARIABLE_NAME}, attr(data-node-anchor type(<custom-ident>)))`
509
+ }
510
+ }
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
+ });
486
541
  export const GlobalStylesWrapper = ({
487
542
  api
488
543
  }) => {
489
544
  const isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
490
545
  disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
491
546
  });
547
+ const shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
492
548
  const toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
493
549
  return jsx(Global, {
494
550
  styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
495
551
  exposure: true
496
552
  }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
497
553
  // platform_editor_controls note: this allows drag handles to render on empty lines
498
- 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]
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)]
499
555
  });
500
556
  };
package/dist/esm/ui/global-styles.js CHANGED
@@ -5,11 +5,12 @@ 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 { tableControlsSpacing, DRAG_HANDLE_WIDTH } from '@atlaskit/editor-common/styles';
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';
12
- import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced, akEditorFullPageNarrowBreakout } from '@atlaskit/editor-shared-styles';
12
+ import { akEditorBreakoutPadding, akEditorCalculatedWideLayoutWidth, akEditorCalculatedWideLayoutWidthSmallViewport, akEditorFullPageNarrowBreakout, akEditorGutterPaddingDynamic, akEditorGutterPaddingReduced } from '@atlaskit/editor-shared-styles';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { layers } from '@atlaskit/theme/constants';
14
15
  import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
15
16
  import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
@@ -398,17 +399,72 @@ var blockCardWithoutLayout = css({
398
399
  '--ak-editor-block-card-width': 'max(var(--ak-editor--legacy-breakout-wide-layout-width), var(--ak-editor--line-length))'
399
400
  }
400
401
  });
402
+ var dragHandlerAnchorStyles = css({
403
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
404
+ '.ProseMirror': {
405
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
406
+ '[data-testid="block-ctrl-decorator-widget"] + * [data-node-anchor]': {
407
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
408
+ anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
409
+ },
410
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
411
+ '[data-testid="block-ctrl-quick-insert-button"] + * [data-node-anchor]': {
412
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
413
+ anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
414
+ },
415
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
416
+ '[data-testid="block-ctrl-decorator-widget"] + [data-node-anchor]': {
417
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
418
+ anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
419
+ },
420
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors
421
+ '[data-testid="block-ctrl-quick-insert-button"] + [data-node-anchor]': {
422
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values
423
+ anchorName: "var(".concat(ANCHOR_VARIABLE_NAME, ", attr(data-node-anchor type(<custom-ident>)))")
424
+ }
425
+ }
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
+ });
401
456
  export var GlobalStylesWrapper = function GlobalStylesWrapper(_ref) {
402
457
  var api = _ref.api;
403
458
  var isDragging = useSharedPluginStateSelector(api, 'blockControls.isDragging', {
404
459
  disabled: !expValEquals('platform_editor_block_controls_perf_optimization', 'isEnabled', true)
405
460
  });
461
+ var shouldRenderAnchors = isCSSAnchorSupported() && expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) && fg('platform_native_anchor_use_css_style');
406
462
  var toolbarFlagsEnabled = areToolbarFlagsEnabled(Boolean(api === null || api === void 0 ? void 0 : api.toolbar));
407
463
  return jsx(Global, {
408
464
  styles: [globalStyles(), globalDnDStyle, expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedHoverZoneNext() : extendedHoverZone(), isDragging && (expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendedDragZoneNext : extendedDragZone), editorExperiment('platform_editor_preview_panel_responsiveness', true, {
409
465
  exposure: true
410
466
  }) ? expValEquals('platform_editor_native_anchor_support', 'isEnabled', true) ? extendHoverZoneReducedNext : extendHoverZoneReduced : undefined,
411
467
  // platform_editor_controls note: this allows drag handles to render on empty lines
412
- 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]
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)]
413
469
  });
414
470
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/editor-plugin-block-controls",
3
- "version": "7.7.9",
3
+ "version": "7.9.0",
4
4
  "description": "Block controls plugin for @atlaskit/editor-core",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -52,9 +52,9 @@
52
52
  "@atlaskit/pragmatic-drag-and-drop": "^1.7.0",
53
53
  "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "^2.1.0",
54
54
  "@atlaskit/pragmatic-drag-and-drop-react-drop-indicator": "^3.2.0",
55
- "@atlaskit/primitives": "^16.3.0",
55
+ "@atlaskit/primitives": "^16.4.0",
56
56
  "@atlaskit/theme": "^21.0.0",
57
- "@atlaskit/tmp-editor-statsig": "^13.42.0",
57
+ "@atlaskit/tmp-editor-statsig": "^13.43.0",
58
58
  "@atlaskit/tokens": "^8.3.0",
59
59
  "@atlaskit/tooltip": "^20.10.0",
60
60
  "@babel/runtime": "^7.0.0",
@@ -66,7 +66,7 @@
66
66
  "uuid": "^3.1.0"
67
67
  },
68
68
  "peerDependencies": {
69
- "@atlaskit/editor-common": "^110.34.0",
69
+ "@atlaskit/editor-common": "^110.35.0",
70
70
  "react": "^18.2.0",
71
71
  "react-dom": "^18.2.0",
72
72
  "react-intl-next": "npm:react-intl@^5.18.1"
@@ -143,6 +143,9 @@
143
143
  "dst-a11y__replace-anchor-with-link__editor-jenga": {
144
144
  "type": "boolean"
145
145
  },
146
+ "platform_native_anchor_use_css_style": {
147
+ "type": "boolean"
148
+ },
146
149
  "editor_native_anchor_remove_decoration_in_apply": {
147
150
  "type": "boolean"
148
151
  },