@atlaskit/editor-plugin-block-controls 17.1.3 → 17.1.5

package/dist/types/ui/block-controls-surface-context.d.ts

@@ -1,4 +1,6 @@
 import type { BlockControlUIContext } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
+import type { EditorState } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { ActiveNode } from '../blockControlsPluginType';
+export declare const createBlockControlsSurfaceContextForPosition: (state: EditorState, targetPos: number, activeNode?: ActiveNode) => BlockControlUIContext | undefined;
 export declare const createBlockControlsSurfaceContext: (view: EditorView, activeNode: ActiveNode | undefined, target?: 'active' | 'root') => BlockControlUIContext | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-block-controls",
-	"version": "17.1.3",
+	"version": "17.1.5",
 	"description": "Block controls plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -34,7 +34,7 @@
 		"@atlaskit/editor-plugin-metrics": "^17.0.0",
 		"@atlaskit/editor-plugin-quick-insert": "^16.1.0",
 		"@atlaskit/editor-plugin-selection": "^16.0.0",
-		"@atlaskit/editor-plugin-show-diff": "^14.1.0",
+		"@atlaskit/editor-plugin-show-diff": "^14.2.0",
 		"@atlaskit/editor-plugin-toolbar": "^13.0.0",
 		"@atlaskit/editor-plugin-type-ahead": "^17.0.0",
 		"@atlaskit/editor-plugin-ui-control-registry": "^10.0.0",
@@ -55,7 +55,7 @@
 		"@atlaskit/primitives": "^22.4.0",
 		"@atlaskit/section-message": "^10.1.0",
 		"@atlaskit/theme": "^28.1.0",
-		"@atlaskit/tmp-editor-statsig": "^163.0.0",
+		"@atlaskit/tmp-editor-statsig": "^164.0.0",
 		"@atlaskit/tokens": "^16.8.0",
 		"@atlaskit/tooltip": "^24.2.0",
 		"@babel/runtime": "^7.0.0",
@@ -67,7 +67,7 @@
 		"uuid": "^3.1.0"
 	},
 	"peerDependencies": {
-		"@atlaskit/editor-common": "^120.3.0",
+		"@atlaskit/editor-common": "^120.5.0",
 		"react": "^18.2.0 || ^19.2.0",
 		"react-dom": "^18.2.0 || ^19.2.0",
 		"react-intl": "^5.25.1 || ^6.0.0 || ^7.0.0"

package/dist/cjs/ui/block-controls-surface.js

@@ -1,185 +0,0 @@
-/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BlockControlsSurface = void 0;
-require("./block-controls-surface.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _react = _interopRequireWildcard(require("react"));
-var _bindEventListener = require("bind-event-listener");
-var _browserApis = require("@atlaskit/browser-apis");
-var _blockControlUiContext = require("@atlaskit/editor-common/block-controls/block-control-ui-context");
-var _surfaceKeys = require("@atlaskit/editor-common/block-controls/surface-keys");
-var _hooks = require("@atlaskit/editor-common/hooks");
-var _surfaceRenderer = require("@atlaskit/editor-ui-control-model/surface-renderer");
-var _types = require("@atlaskit/editor-ui-control-model/types");
-var _decorationsCommon = require("../pm-plugins/decorations-common");
-var _blockControlsSurfaceContext = require("./block-controls-surface-context");
-var _getNodeContentElement = require("./utils/get-node-content-element");
-var _getSurfacePlacement = require("./utils/get-surface-placement");
-var _visibilityContainer = require("./visibility-container");
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
-var surfaceStyles = null;
-var BlockControlsSurfaceAtTarget = function BlockControlsSurfaceAtTarget(_ref) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
-  var activeNode = _ref.activeNode,
-    api = _ref.api,
-    editorView = _ref.editorView,
-    target = _ref.target;
-  var _useState = (0, _react.useState)(),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  var animationFrameRef = (0, _react.useRef)(undefined);
-  var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(_surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  var blockControlsContext = (0, _react.useMemo)(function () {
-    return (0, _blockControlsSurfaceContext.createBlockControlsSurfaceContext)(editorView, activeNode, target);
-  }, [activeNode, editorView, target]);
-  var surfaceContext = (0, _react.useMemo)(function () {
-    return blockControlsContext ? (0, _types.createSurfaceContext)(_blockControlUiContext.BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
-  }, [blockControlsContext]);
-  (0, _react.useLayoutEffect)(function () {
-    var _getDocument;
-    if (!blockControlsContext) {
-      setPosition(undefined);
-      return;
-    }
-    var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
-    var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
-    if (!targetElementRoot) {
-      setPosition(undefined);
-      return;
-    }
-    var targetElement = (0, _getNodeContentElement.getNodeContentElement)(targetElementRoot, blockControlsContext.targetNode.type.name);
-    var offsetParent = editorView.dom.offsetParent;
-    var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
-    var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
-    var updatePosition = function updatePosition() {
-      var _targetElementRoot$ge, _scrollingOffsetParen, _scrollingOffsetParen2;
-      animationFrameRef.current = undefined;
-      if (!targetElementRoot.isConnected || !targetElement.isConnected) {
-        setPosition(undefined);
-        return;
-      }
-      var placement = (0, _getSurfacePlacement.getSurfacePlacement)({
-        layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
-        nodeRect: targetElement.getBoundingClientRect(),
-        nodeType: blockControlsContext.targetNode.type.name,
-        nodeTypeWithLevel: (0, _decorationsCommon.getNodeTypeWithLevel)(blockControlsContext.targetNode.node),
-        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
-      });
-      var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
-      var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
-      var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
-      setPosition((0, _getSurfacePlacement.getAbsoluteSurfacePlacement)({
-        offsetParentRect: offsetParentRect,
-        offsetParentScrollLeft: offsetParentScrollLeft,
-        offsetParentScrollTop: offsetParentScrollTop,
-        placement: placement
-      }));
-    };
-    var schedulePositionUpdate = function schedulePositionUpdate() {
-      if (animationFrameRef.current === undefined) {
-        animationFrameRef.current = requestAnimationFrame(updatePosition);
-      }
-    };
-    updatePosition();
-    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
-    resizeObserver.observe(editorView.dom);
-    if (targetElement && targetElement !== editorView.dom) {
-      resizeObserver.observe(targetElement);
-    }
-    if (offsetParent instanceof HTMLElement && offsetParent !== editorView.dom) {
-      resizeObserver.observe(offsetParent);
-    }
-    var unbindWindowResize = (0, _bindEventListener.bind)(window, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    });
-    var unbindWindowScroll = (0, _bindEventListener.bind)(window, {
-      type: 'scroll',
-      listener: schedulePositionUpdate,
-      options: {
-        capture: true,
-        passive: true
-      }
-    });
-    var visualViewport = window.visualViewport;
-    var unbindVisualViewportResize = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    var unbindVisualViewportScroll = visualViewport ? (0, _bindEventListener.bind)(visualViewport, {
-      type: 'scroll',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    var unbindTransitionEnd = (0, _bindEventListener.bind)(targetElement, {
-      type: 'transitionend',
-      listener: schedulePositionUpdate
-    });
-    return function () {
-      if (animationFrameRef.current !== undefined) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = undefined;
-      }
-      resizeObserver.disconnect();
-      unbindWindowResize();
-      unbindWindowScroll();
-      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
-      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
-      unbindTransitionEnd();
-    };
-  }, [blockControlsContext, editorView]);
-  if (components.length === 0 || !blockControlsContext || !surfaceContext || !position || !(0, _surfaceRenderer.willSurfaceRender)(components, _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
-    return null;
-  }
-  return /*#__PURE__*/_react.default.createElement("div", {
-    "data-editor-block-controls-surface": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the active node's runtime DOM geometry.
-    ,
-    style: position,
-    "data-testid": target === 'root' ? 'block-controls-left-surface' : 'block-controls-left-surface-active',
-    className: (0, _runtime.ax)(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
-  }, /*#__PURE__*/_react.default.createElement(_visibilityContainer.VisibilityContainer, {
-    api: api,
-    controlSide: "left",
-    forceVisibleOnMouseOut: Boolean((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/_react.default.createElement(_surfaceRenderer.SurfaceRenderer, {
-    components: components,
-    surface: _surfaceKeys.BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  })));
-};
-var BlockControlsSurface = exports.BlockControlsSurface = function BlockControlsSurface(_ref2) {
-  var _activeNode$rootPos;
-  var api = _ref2.api,
-    editorView = _ref2.editorView;
-  var activeNode = (0, _hooks.useSharedPluginStateWithSelector)(api, ['blockControls'], function (states) {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
-  if (!activeNode) {
-    return null;
-  }
-  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "root"
-  }), rootPos !== activeNode.pos ? /*#__PURE__*/_react.default.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "active"
-  }) : null);
-};

package/dist/es2019/ui/block-controls-surface.js

@@ -1,170 +0,0 @@
-/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
-import "./block-controls-surface.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import { getDocument } from '@atlaskit/browser-apis';
-import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
-import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
-import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
-import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
-import { createBlockControlsSurfaceContext } from './block-controls-surface-context';
-import { getNodeContentElement } from './utils/get-node-content-element';
-import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
-import { VisibilityContainer } from './visibility-container';
-const BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
-const surfaceStyles = null;
-const BlockControlsSurfaceAtTarget = ({
-  activeNode,
-  api,
-  editorView,
-  target
-}) => {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
-  const [position, setPosition] = useState();
-  const animationFrameRef = useRef(undefined);
-  const components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  const blockControlsContext = useMemo(() => createBlockControlsSurfaceContext(editorView, activeNode, target), [activeNode, editorView, target]);
-  const surfaceContext = useMemo(() => blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined, [blockControlsContext]);
-  useLayoutEffect(() => {
-    var _getDocument;
-    if (!blockControlsContext) {
-      setPosition(undefined);
-      return;
-    }
-    const targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
-    const targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
-    if (!targetElementRoot) {
-      setPosition(undefined);
-      return;
-    }
-    const targetElement = getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name);
-    const offsetParent = editorView.dom.offsetParent;
-    const isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
-    const scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
-    const updatePosition = () => {
-      var _targetElementRoot$ge, _scrollingOffsetParen, _scrollingOffsetParen2;
-      animationFrameRef.current = undefined;
-      if (!targetElementRoot.isConnected || !targetElement.isConnected) {
-        setPosition(undefined);
-        return;
-      }
-      const placement = getSurfacePlacement({
-        layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
-        nodeRect: targetElement.getBoundingClientRect(),
-        nodeType: blockControlsContext.targetNode.type.name,
-        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
-        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
-      });
-      const offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
-      const offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
-      const offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
-      setPosition(getAbsoluteSurfacePlacement({
-        offsetParentRect,
-        offsetParentScrollLeft,
-        offsetParentScrollTop,
-        placement
-      }));
-    };
-    const schedulePositionUpdate = () => {
-      if (animationFrameRef.current === undefined) {
-        animationFrameRef.current = requestAnimationFrame(updatePosition);
-      }
-    };
-    updatePosition();
-    const resizeObserver = new ResizeObserver(schedulePositionUpdate);
-    resizeObserver.observe(editorView.dom);
-    if (targetElement && targetElement !== editorView.dom) {
-      resizeObserver.observe(targetElement);
-    }
-    if (offsetParent instanceof HTMLElement && offsetParent !== editorView.dom) {
-      resizeObserver.observe(offsetParent);
-    }
-    const unbindWindowResize = bind(window, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    });
-    const unbindWindowScroll = bind(window, {
-      type: 'scroll',
-      listener: schedulePositionUpdate,
-      options: {
-        capture: true,
-        passive: true
-      }
-    });
-    const visualViewport = window.visualViewport;
-    const unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    const unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
-      type: 'scroll',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    const unbindTransitionEnd = bind(targetElement, {
-      type: 'transitionend',
-      listener: schedulePositionUpdate
-    });
-    return () => {
-      if (animationFrameRef.current !== undefined) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = undefined;
-      }
-      resizeObserver.disconnect();
-      unbindWindowResize();
-      unbindWindowScroll();
-      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 ? void 0 : unbindVisualViewportResize();
-      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 ? void 0 : unbindVisualViewportScroll();
-      unbindTransitionEnd();
-    };
-  }, [blockControlsContext, editorView]);
-  if (components.length === 0 || !blockControlsContext || !surfaceContext || !position || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-editor-block-controls-surface": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the active node's runtime DOM geometry.
-    ,
-    style: position,
-    "data-testid": target === 'root' ? 'block-controls-left-surface' : 'block-controls-left-surface-active',
-    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
-    api: api,
-    controlSide: "left",
-    forceVisibleOnMouseOut: Boolean((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  })));
-};
-export const BlockControlsSurface = ({
-  api,
-  editorView
-}) => {
-  var _activeNode$rootPos;
-  const activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], states => {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
-  if (!activeNode) {
-    return null;
-  }
-  const rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "root"
-  }), rootPos !== activeNode.pos ? /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "active"
-  }) : null);
-};

package/dist/esm/ui/block-controls-surface.js

@@ -1,176 +0,0 @@
-/* block-controls-surface.tsx generated by @compiled/babel-plugin v2.0.0 */
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import "./block-controls-surface.compiled.css";
-import { ax, ix } from "@compiled/react/runtime";
-import React, { useLayoutEffect, useMemo, useRef, useState } from 'react';
-import { bind } from 'bind-event-listener';
-import { getDocument } from '@atlaskit/browser-apis';
-import { BLOCK_CONTROL_UI_CONTEXT } from '@atlaskit/editor-common/block-controls/block-control-ui-context';
-import { BLOCK_CONTROLS_LEFT_SURFACE } from '@atlaskit/editor-common/block-controls/surface-keys';
-import { useSharedPluginStateWithSelector } from '@atlaskit/editor-common/hooks';
-import { SurfaceRenderer, willSurfaceRender } from '@atlaskit/editor-ui-control-model/surface-renderer';
-import { createSurfaceContext } from '@atlaskit/editor-ui-control-model/types';
-import { getNodeTypeWithLevel } from '../pm-plugins/decorations-common';
-import { createBlockControlsSurfaceContext } from './block-controls-surface-context';
-import { getNodeContentElement } from './utils/get-node-content-element';
-import { getAbsoluteSurfacePlacement, getSurfacePlacement } from './utils/get-surface-placement';
-import { VisibilityContainer } from './visibility-container';
-var BLOCK_CONTROLS_SURFACE_Z_INDEX = 100;
-var surfaceStyles = null;
-var BlockControlsSurfaceAtTarget = function BlockControlsSurfaceAtTarget(_ref) {
-  var _api$uiControlRegistr, _api$uiControlRegistr2, _activeNode$handleOpt;
-  var activeNode = _ref.activeNode,
-    api = _ref.api,
-    editorView = _ref.editorView,
-    target = _ref.target;
-  var _useState = useState(),
-    _useState2 = _slicedToArray(_useState, 2),
-    position = _useState2[0],
-    setPosition = _useState2[1];
-  var animationFrameRef = useRef(undefined);
-  var components = (_api$uiControlRegistr = (_api$uiControlRegistr2 = api.uiControlRegistry) === null || _api$uiControlRegistr2 === void 0 ? void 0 : _api$uiControlRegistr2.actions.getComponents(BLOCK_CONTROLS_LEFT_SURFACE)) !== null && _api$uiControlRegistr !== void 0 ? _api$uiControlRegistr : [];
-  var blockControlsContext = useMemo(function () {
-    return createBlockControlsSurfaceContext(editorView, activeNode, target);
-  }, [activeNode, editorView, target]);
-  var surfaceContext = useMemo(function () {
-    return blockControlsContext ? createSurfaceContext(BLOCK_CONTROL_UI_CONTEXT, blockControlsContext) : undefined;
-  }, [blockControlsContext]);
-  useLayoutEffect(function () {
-    var _getDocument;
-    if (!blockControlsContext) {
-      setPosition(undefined);
-      return;
-    }
-    var targetNodeElement = editorView.nodeDOM(blockControlsContext.targetNode.pos);
-    var targetElementRoot = targetNodeElement instanceof HTMLElement ? targetNodeElement : targetNodeElement === null || targetNodeElement === void 0 ? void 0 : targetNodeElement.parentElement;
-    if (!targetElementRoot) {
-      setPosition(undefined);
-      return;
-    }
-    var targetElement = getNodeContentElement(targetElementRoot, blockControlsContext.targetNode.type.name);
-    var offsetParent = editorView.dom.offsetParent;
-    var isDocumentOffsetParent = !offsetParent || offsetParent === ((_getDocument = getDocument()) === null || _getDocument === void 0 ? void 0 : _getDocument.body);
-    var scrollingOffsetParent = offsetParent instanceof HTMLElement && !isDocumentOffsetParent ? offsetParent : undefined;
-    var updatePosition = function updatePosition() {
-      var _targetElementRoot$ge, _scrollingOffsetParen, _scrollingOffsetParen2;
-      animationFrameRef.current = undefined;
-      if (!targetElementRoot.isConnected || !targetElement.isConnected) {
-        setPosition(undefined);
-        return;
-      }
-      var placement = getSurfacePlacement({
-        layout: (_targetElementRoot$ge = targetElementRoot.getAttribute('layout')) !== null && _targetElementRoot$ge !== void 0 ? _targetElementRoot$ge : '',
-        nodeRect: targetElement.getBoundingClientRect(),
-        nodeType: blockControlsContext.targetNode.type.name,
-        nodeTypeWithLevel: getNodeTypeWithLevel(blockControlsContext.targetNode.node),
-        parentNodeType: blockControlsContext.targetNode.parentType === 'doc' ? undefined : blockControlsContext.targetNode.parentType
-      });
-      var offsetParentRect = offsetParent === null || offsetParent === void 0 ? void 0 : offsetParent.getBoundingClientRect();
-      var offsetParentScrollTop = (_scrollingOffsetParen = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollTop) !== null && _scrollingOffsetParen !== void 0 ? _scrollingOffsetParen : window.scrollY;
-      var offsetParentScrollLeft = (_scrollingOffsetParen2 = scrollingOffsetParent === null || scrollingOffsetParent === void 0 ? void 0 : scrollingOffsetParent.scrollLeft) !== null && _scrollingOffsetParen2 !== void 0 ? _scrollingOffsetParen2 : window.scrollX;
-      setPosition(getAbsoluteSurfacePlacement({
-        offsetParentRect: offsetParentRect,
-        offsetParentScrollLeft: offsetParentScrollLeft,
-        offsetParentScrollTop: offsetParentScrollTop,
-        placement: placement
-      }));
-    };
-    var schedulePositionUpdate = function schedulePositionUpdate() {
-      if (animationFrameRef.current === undefined) {
-        animationFrameRef.current = requestAnimationFrame(updatePosition);
-      }
-    };
-    updatePosition();
-    var resizeObserver = new ResizeObserver(schedulePositionUpdate);
-    resizeObserver.observe(editorView.dom);
-    if (targetElement && targetElement !== editorView.dom) {
-      resizeObserver.observe(targetElement);
-    }
-    if (offsetParent instanceof HTMLElement && offsetParent !== editorView.dom) {
-      resizeObserver.observe(offsetParent);
-    }
-    var unbindWindowResize = bind(window, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    });
-    var unbindWindowScroll = bind(window, {
-      type: 'scroll',
-      listener: schedulePositionUpdate,
-      options: {
-        capture: true,
-        passive: true
-      }
-    });
-    var visualViewport = window.visualViewport;
-    var unbindVisualViewportResize = visualViewport ? bind(visualViewport, {
-      type: 'resize',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    var unbindVisualViewportScroll = visualViewport ? bind(visualViewport, {
-      type: 'scroll',
-      listener: schedulePositionUpdate
-    }) : undefined;
-    var unbindTransitionEnd = bind(targetElement, {
-      type: 'transitionend',
-      listener: schedulePositionUpdate
-    });
-    return function () {
-      if (animationFrameRef.current !== undefined) {
-        cancelAnimationFrame(animationFrameRef.current);
-        animationFrameRef.current = undefined;
-      }
-      resizeObserver.disconnect();
-      unbindWindowResize();
-      unbindWindowScroll();
-      unbindVisualViewportResize === null || unbindVisualViewportResize === void 0 || unbindVisualViewportResize();
-      unbindVisualViewportScroll === null || unbindVisualViewportScroll === void 0 || unbindVisualViewportScroll();
-      unbindTransitionEnd();
-    };
-  }, [blockControlsContext, editorView]);
-  if (components.length === 0 || !blockControlsContext || !surfaceContext || !position || !willSurfaceRender(components, BLOCK_CONTROLS_LEFT_SURFACE, surfaceContext)) {
-    return null;
-  }
-  return /*#__PURE__*/React.createElement("div", {
-    "data-editor-block-controls-surface": true
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Placement is resolved from the active node's runtime DOM geometry.
-    ,
-    style: position,
-    "data-testid": target === 'root' ? 'block-controls-left-surface' : 'block-controls-left-surface-active',
-    className: ax(["_zulpv77o _4cvr1h6o _1e0c1txw _kqswstnw _1pbyb4wl"])
-  }, /*#__PURE__*/React.createElement(VisibilityContainer, {
-    api: api,
-    controlSide: "left",
-    forceVisibleOnMouseOut: Boolean((_activeNode$handleOpt = activeNode.handleOptions) === null || _activeNode$handleOpt === void 0 ? void 0 : _activeNode$handleOpt.isFocused),
-    shouldUseDisplayContents: true
-  }, /*#__PURE__*/React.createElement(SurfaceRenderer, {
-    components: components,
-    surface: BLOCK_CONTROLS_LEFT_SURFACE,
-    surfaceContext: surfaceContext
-  })));
-};
-export var BlockControlsSurface = function BlockControlsSurface(_ref2) {
-  var _activeNode$rootPos;
-  var api = _ref2.api,
-    editorView = _ref2.editorView;
-  var activeNode = useSharedPluginStateWithSelector(api, ['blockControls'], function (states) {
-    var _states$blockControls;
-    return {
-      activeNode: (_states$blockControls = states.blockControlsState) === null || _states$blockControls === void 0 ? void 0 : _states$blockControls.activeNode
-    };
-  }).activeNode;
-  if (!activeNode) {
-    return null;
-  }
-  var rootPos = (_activeNode$rootPos = activeNode.rootPos) !== null && _activeNode$rootPos !== void 0 ? _activeNode$rootPos : activeNode.pos;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "root"
-  }), rootPos !== activeNode.pos ? /*#__PURE__*/React.createElement(BlockControlsSurfaceAtTarget, {
-    activeNode: activeNode,
-    api: api,
-    editorView: editorView,
-    target: "active"
-  }) : null);
-};