box-annotations 5.2.1-beta.8 → 5.3.1-beta.0

package/src/drawing/DrawingManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import DrawingAnnotationsContainer from './DrawingAnnotationsContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class DrawingListManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--drawing');
         this.reactEl.dataset.testid = 'ba-Layer--drawing';
@@ -14,6 +25,14 @@ export default class DrawingListManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<DrawingAnnotationsContainer referenceEl={this.referenceEl} targetType={this.targetType} location={this.location} {...props} />);
+        this.root.render(
+            <DrawingAnnotationsContainer
+                referenceEl={this.referenceEl}
+                targetType={this.targetType}
+                location={this.location}
+                popupPortalEl={this.popupPortalEl}
+                {...props}
+            />,
+        );
     }
 }

package/src/highlight/HighlightAnnotations.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import ReactDOM from 'react-dom';
 import HighlightCanvas from './HighlightCanvas';
 import HighlightList from './HighlightList';
 import HighlightSvg from './HighlightSvg';
@@ -20,6 +21,8 @@ type Props = {
     isPromoting: boolean;
     isSelecting: boolean;
     location: number;
+    popupPortalEl?: HTMLElement | null;
+    rotation: number;
     selection: SelectionItem | null;
     setActiveAnnotationId: (annotationId: string | null) => void;
     setIsPromoting: (isPromoting: boolean) => void;
@@ -38,6 +41,8 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
         isPending = false,
         isPromoting = false,
         isSelecting = false,
+        popupPortalEl,
+        rotation,
         selection,
         setActiveAnnotationId,
         setIsPromoting,
@@ -121,22 +126,31 @@ const HighlightAnnotations = (props: Props): JSX.Element => {
             )}
 
             {/* Layer 3a: Annotations promoter to promote selection to staged */}
-            {!isCreating && selection && !selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlight
-                        onCancel={handleCancel}
-                        onSubmit={handlePromote}
-                        shape={getBoundingRect(selection.rects)}
-                    />
-                </div>
-            )}
+            {!isCreating &&
+                selection &&
+                !selection.hasError &&
+                (() => {
+                    const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                    const popup = (
+                        <div className="ba-HighlightAnnotations-popup">
+                            <PopupHighlight onCancel={handleCancel} onSubmit={handlePromote} shape={popupShape} />
+                        </div>
+                    );
+                    return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+                })()}
 
             {/* Layer 3b: Highlight error popup */}
-            {selection && selection.hasError && (
-                <div className="ba-HighlightAnnotations-popup">
-                    <PopupHighlightError onCancel={handleCancel} shape={getBoundingRect(selection.rects)} />
-                </div>
-            )}
+            {selection &&
+                selection.hasError &&
+                (() => {
+                    const popupShape = selection.popupRect || getBoundingRect(selection.rects);
+                    const popup = (
+                        <div className="ba-HighlightAnnotations-popup">
+                            <PopupHighlightError onCancel={handleCancel} shape={popupShape} />
+                        </div>
+                    );
+                    return rotation && popupPortalEl ? ReactDOM.createPortal(popup, popupPortalEl) : popup;
+                })()}
         </>
     );
 };

package/src/highlight/HighlightContainer.tsx

@@ -13,6 +13,7 @@ import {
     getCreatorStatus,
     getIsPromoting,
     getIsSelecting,
+    getRotation,
     getSelectionForLocation,
     isCreatorStagedHighlight,
     Mode,
@@ -33,6 +34,7 @@ export type Props = {
     isPending: boolean;
     isPromoting: boolean;
     isSelecting: boolean;
+    rotation: number;
     selection: SelectionItem | null;
     staged: CreatorItemHighlight | null;
 };
@@ -47,6 +49,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
         isPending: getCreatorStatus(state) === CreatorStatus.pending,
         isPromoting: getIsPromoting(state),
         isSelecting: getIsSelecting(state),
+        rotation: getRotation(state),
         selection: getSelectionForLocation(state, location),
         staged: isCreatorStagedHighlight(staged) ? staged : null,
     };

package/src/highlight/HighlightCreator.scss

@@ -7,6 +7,13 @@ $text_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAA
     $offset_x: 10;
     $offset_y: 16;
 
-    cursor: url($text_cursor_32) $offset_x $offset_y, text; /* Legacy */
-    cursor: image-set(url($text_cursor_32) 1x, url($text_cursor_32_2x) 2x, url($text_cursor_32_3x) 3x) $offset_x $offset_y, text; /* Webkit */ /* stylelint-disable-line */
+    cursor:
+        url($text_cursor_32) $offset_x $offset_y,
+        text; /* Legacy */
+
+    /* stylelint-disable unit-no-unknown */
+    cursor:
+        image-set(url($text_cursor_32) 1x, url($text_cursor_32_2x) 2x, url($text_cursor_32_3x) 3x) $offset_x $offset_y,
+        text; /* Webkit */
+    /* stylelint-enable unit-no-unknown */
 }

package/src/highlight/HighlightCreatorManager.ts

@@ -1,6 +1,7 @@
 import {
     AppStore,
     getIsSelecting,
+    getRotation,
     SelectionArg as Selection,
     setIsSelectingAction,
     setSelectionAction,
@@ -41,18 +42,18 @@ export default class HighlightCreatorManager implements Manager {
         this.store.dispatch(setSelectionAction(null));
 
         this.referenceEl.addEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('mouseup', this.handleMouseUp);
     }
 
-    style(styles: Partial<CSSStyleDeclaration>): CSSStyleDeclaration {
-        return Object.assign(this.referenceEl.style, styles);
+    style(): CSSStyleDeclaration {
+        return this.referenceEl.style;
     }
 
     destroy(): void {
         clearTimeout(this.selectionChangeTimer);
 
         this.referenceEl.removeEventListener('mousedown', this.handleMouseDown);
-        this.referenceEl.removeEventListener('mouseup', this.handleMouseUp);
+        document.removeEventListener('mouseup', this.handleMouseUp);
     }
 
     handleMouseDown = ({ buttons }: MouseEvent): void => {
@@ -72,7 +73,9 @@ export default class HighlightCreatorManager implements Manager {
         }
 
         this.selectionChangeTimer = window.setTimeout(() => {
-            this.store.dispatch(setSelectionAction(this.getSelection()));
+            const selection = this.getSelection();
+            const rotation = getRotation(this.store.getState());
+            this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
             this.store.dispatch(setIsSelectingAction(false));
         }, this.selectionChangeDelay);
     };

package/src/highlight/HighlightListener.ts

@@ -1,5 +1,5 @@
 import debounce from 'lodash/debounce';
-import { AppStore, getIsSelecting, SelectionArg as Selection, setSelectionAction } from '../store';
+import { AppStore, getIsSelecting, getRotation, SelectionArg as Selection, setSelectionAction } from '../store';
 
 export type Options = {
     getSelection: () => Selection | null;
@@ -30,7 +30,9 @@ export default class HighlightListener {
             return;
         }
 
-        this.store.dispatch(setSelectionAction(this.getSelection()));
+        const selection = this.getSelection();
+        const rotation = getRotation(this.store.getState());
+        this.store.dispatch(setSelectionAction(selection ? { ...selection, rotation } : null));
     };
 
     debounceHandleSelectionChange = debounce(this.handleSelectionChange, SELECTION_CHANGE_DEBOUNCE);

package/src/highlight/HighlightManager.tsx

@@ -1,9 +1,20 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
-import BaseManager, { Props } from '../common/BaseManager';
+import BaseManager, { Options as BaseOptions, Props } from '../common/BaseManager';
 import HighlightContainer from './HighlightContainer';
 
+export type Options = BaseOptions & {
+    popupPortalEl?: HTMLElement | null;
+};
+
 export default class HighlightManager extends BaseManager {
+    popupPortalEl?: HTMLElement | null;
+
+    constructor({ popupPortalEl, ...options }: Options) {
+        super(options);
+        this.popupPortalEl = popupPortalEl;
+    }
+
     decorate(): void {
         this.reactEl.classList.add('ba-Layer--highlight');
         this.reactEl.dataset.testid = 'ba-Layer--highlight';
@@ -14,6 +25,6 @@ export default class HighlightManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<HighlightContainer location={this.location} {...props} />);
+        this.root.render(<HighlightContainer location={this.location} popupPortalEl={this.popupPortalEl} {...props} />);
     }
 }

package/src/image/ImageAnnotator.ts

@@ -74,7 +74,7 @@ export default class ImageAnnotator extends BaseAnnotator {
             }
 
             this.managers.add(new PopupManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
-            this.managers.add(new DrawingManager({ referenceEl, resinTags }));
+            this.managers.add(new DrawingManager({ popupPortalEl: this.popupPortalEl, referenceEl, resinTags }));
             this.managers.add(new RegionManager({ referenceEl, resinTags }));
             this.managers.add(new RegionCreationManager({ referenceEl, resinTags }));
         }
@@ -124,6 +124,7 @@ export default class ImageAnnotator extends BaseAnnotator {
             });
 
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });

package/src/media/MediaAnnotator.ts

@@ -27,7 +27,6 @@ export default class MediaAnnotator extends BaseAnnotator {
     }
 
     destroy(): void {
-
         // If the store handler is present, unsubscribe from the store.
         if (this.storeHandler) {
             this.storeHandler();
@@ -44,12 +43,40 @@ export default class MediaAnnotator extends BaseAnnotator {
         return this.containerEl?.querySelector(VIDEO_PARENT_SELECTOR);
     }
 
-
-    addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string|null; iscurrent: boolean }): void {
-        this.managers.add(new PopupManager({ location: MEDIA_LOCATION_INDEX, popupPortalEl: this.popupPortalEl, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new DrawingManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new RegionManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
-        this.managers.add(new RegionCreationManager({ location: MEDIA_LOCATION_INDEX, referenceEl, resinTags, targetType: TARGET_TYPE.FRAME }));
+    addManagers(referenceEl: HTMLVideoElement, resinTags: { fileid: string | null; iscurrent: boolean }): void {
+        this.managers.add(
+            new PopupManager({
+                location: MEDIA_LOCATION_INDEX,
+                popupPortalEl: this.popupPortalEl,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new DrawingManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new RegionManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
+        this.managers.add(
+            new RegionCreationManager({
+                location: MEDIA_LOCATION_INDEX,
+                referenceEl,
+                resinTags,
+                targetType: TARGET_TYPE.FRAME,
+            }),
+        );
     }
 
     getManagers(parentEl: HTMLElement, referenceEl: HTMLVideoElement): Set<Manager> {
@@ -70,8 +97,6 @@ export default class MediaAnnotator extends BaseAnnotator {
         return this.managers;
     }
 
-  
-
     // returns the actual video element
     getReference(): HTMLVideoElement | null | undefined {
         return this.annotatedEl?.querySelector('video');
@@ -108,6 +133,7 @@ export default class MediaAnnotator extends BaseAnnotator {
                 width: `${referenceEl.offsetWidth}px`,
             });
             manager.render({
+                callbacks: { onCopyLink: this.onCopyLink },
                 intl: this.intl,
                 store: this.store,
             });
@@ -116,12 +142,11 @@ export default class MediaAnnotator extends BaseAnnotator {
         this.postRender();
     }
 
-    // This function gets called by the client. We are using the name scrollToAnnotation to match 
+    // This function gets called by the client. We are using the name scrollToAnnotation to match
     // the other annotators as the client calls this function when it wants to show an annoation on the
-    // preview. The only difference is that we are using the video element's currentTime to scroll to the 
+    // preview. The only difference is that we are using the video element's currentTime to scroll to the
     // annotation instead of the scrollLeft and scrollTop of the parent element.
-    scrollToAnnotation(annotationId: string | null | undefined, defaultLocation: number = -1 ): void {
-        
+    scrollToAnnotation(annotationId: string | null | undefined, defaultLocation: number = -1): void {
         if (!annotationId) {
             return;
         }
@@ -129,13 +154,11 @@ export default class MediaAnnotator extends BaseAnnotator {
         const annotationLocation = annotation?.target?.location?.value ?? defaultLocation;
         const video = this.getReference();
 
-        if ( !video || !this.annotatedEl || annotationLocation === -1 ) {
+        if (!video || !this.annotatedEl || annotationLocation === -1) {
             return;
         }
 
         video.pause();
         video.currentTime = annotationLocation / 1000;
-        
     }
 }
-

package/src/popup/PopupLayer.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import noop from 'lodash/noop';
 import PopupReply from '../components/Popups/PopupReply';
 import PopupV2 from '../components/Popups/PopupV2';
@@ -44,6 +45,8 @@ const modeStagedMap: { [M in Mode]?: (staged: CreatorItem | null) => boolean } =
     [Mode.REGION]: isCreatorStagedRegion,
 };
 
+const ACTIVE_TARGET_OBSERVER_TIMEOUT_MS = 10000;
+
 const PopupLayer = (props: Props): JSX.Element | null => {
     const {
         activeAnnotationId,
@@ -97,13 +100,39 @@ const PopupLayer = (props: Props): JSX.Element | null => {
         setReference(referenceId ? document.querySelector(`[data-ba-reference-id="${referenceId}"]`) : null);
     }, [referenceId]);
 
+    // activeAnnotationId can be set (e.g. via deep link) before the target DOM node mounts;
+    // observe until it appears, or give up after ACTIVE_TARGET_OBSERVER_TIMEOUT_MS.
     React.useEffect(() => {
-        if (activeAnnotationId && isThreadedAnnotation) {
-            const el = document.querySelector(`[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`);
-            setActiveReference(el);
-        } else {
+        if (!activeAnnotationId || !isThreadedAnnotation) {
             setActiveReference(null);
+            return noop;
+        }
+
+        const selector = `[data-ba-annotation-id="${CSS.escape(activeAnnotationId)}"]`;
+        const existing = document.querySelector(selector);
+        if (existing) {
+            setActiveReference(existing);
+            return noop;
         }
+
+        setActiveReference(null);
+        const observer = new MutationObserver(() => {
+            const el = document.querySelector(selector);
+            if (el) {
+                setActiveReference(el);
+                observer.disconnect();
+            }
+        });
+        observer.observe(document.body, { childList: true, subtree: true });
+
+        const timeoutId = window.setTimeout(() => {
+            observer.disconnect();
+        }, ACTIVE_TARGET_OBSERVER_TIMEOUT_MS);
+
+        return () => {
+            observer.disconnect();
+            window.clearTimeout(timeoutId);
+        };
     }, [activeAnnotationId, isThreadedAnnotation]);
 
     const showCreator = canCreate && canReply && reference && staged;
@@ -111,17 +140,14 @@ const PopupLayer = (props: Props): JSX.Element | null => {
     if (showCreator && isThreadedAnnotation) {
         return (
             <div className="ba-PopupLayer-popup">
-                <PopupV2
-                    onSubmit={handleSubmit}
-                    popupPortalEl={popupPortalEl}
-                    reference={reference}
-                />
+                <PopupV2 onSubmit={handleSubmit} popupPortalEl={popupPortalEl} reference={reference} />
             </div>
         );
     }
 
     if (showCreator) {
-        return (
+        if (!popupPortalEl) return null;
+        return ReactDOM.createPortal(
             <div className="ba-PopupLayer-popup">
                 <PopupReply
                     isPending={isPending}
@@ -131,7 +157,8 @@ const PopupLayer = (props: Props): JSX.Element | null => {
                     reference={reference}
                     value={message}
                 />
-            </div>
+            </div>,
+            popupPortalEl,
         );
     }
 

package/src/popup/PopupManager.tsx

@@ -20,16 +20,18 @@ export default class PopupManager extends BaseManager {
         this.reactEl.dataset.testid = 'ba-Layer--popup';
     }
 
-    render(props: Props): void {
+    render({ callbacks, intl, store }: Props): void {
         if (!this.root) {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
         this.root.render(
             <PopupContainer
+                callbacks={callbacks}
+                intl={intl}
                 location={this.location}
-                {...props}
                 popupPortalEl={this.popupPortalEl}
+                store={store}
                 targetType={this.targetType}
             />,
         );

package/src/region/RegionAnnotations.tsx

@@ -26,8 +26,8 @@ const RegionAnnotations = (props: Props): JSX.Element => {
         setActiveAnnotationId(annotationId);
     };
 
-    let annotationsToShow: AnnotationRegion[] = []
-  
+    let annotationsToShow: AnnotationRegion[] = [];
+
     if (targetType === TARGET_TYPE.FRAME) {
         if (!isVideoSeeking && activeAnnotationId) {
             annotationsToShow = annotations.filter(annotation => annotation.id === activeAnnotationId);
@@ -35,7 +35,6 @@ const RegionAnnotations = (props: Props): JSX.Element => {
     } else {
         annotationsToShow = annotations;
     }
-    
 
     return (
         <RegionList

package/src/region/RegionCreation.tsx

@@ -9,9 +9,9 @@ import { getVideoCurrentTimeInMilliseconds } from '../utils/useVideoTiming';
 
 type Props = {
     isCreating: boolean;
-    isRotated: boolean;
     location: number;
     resetCreator: () => void;
+    rotation: number;
     setReferenceId: (uuid: string) => void;
     setStaged: (staged: CreatorItemRegion | null) => void;
     setStatus: (status: CreatorStatus) => void;
@@ -27,13 +27,19 @@ type State = {
 export default class RegionCreation extends React.PureComponent<Props, State> {
     static defaultProps = {
         isCreating: false,
-        isRotated: false,
+        rotation: 0,
     };
 
     state: State = {};
 
     handleAbort = (): void => {
-        const { resetCreator } = this.props;
+        const { resetCreator, staged } = this.props;
+
+        // Click-away (a click too small to start a new region) must not discard an in-progress comment/annotation
+        if (staged) {
+            return;
+        }
+
         resetCreator();
     };
 
@@ -50,18 +56,17 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
 
     handleStop = (shape: Rect): void => {
         const { location, setStaged, setStatus, targetType, referenceEl } = this.props;
-        const annotationLocation = targetType !== TARGET_TYPE.FRAME ? location : getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
+        const annotationLocation =
+            targetType !== TARGET_TYPE.FRAME
+                ? location
+                : getVideoCurrentTimeInMilliseconds(referenceEl as HTMLVideoElement);
 
         setStaged({ location: annotationLocation, shape });
         setStatus(CreatorStatus.staged);
     };
 
     render(): JSX.Element | null {
-        const { isCreating, isRotated, staged } = this.props;
-
-        if (isRotated) {
-            return null;
-        }
+        const { isCreating, rotation, staged } = this.props;
 
         return (
             <>
@@ -71,6 +76,7 @@ export default class RegionCreation extends React.PureComponent<Props, State> {
                         onAbort={this.handleAbort}
                         onStart={this.handleStart}
                         onStop={this.handleStop}
+                        rotation={rotation}
                     />
                 )}
 

package/src/region/RegionCreationContainer.tsx

@@ -19,7 +19,7 @@ import withProviders from '../common/withProviders';
 
 export type Props = {
     isCreating: boolean;
-    isRotated: boolean;
+    rotation: number;
     staged: CreatorItemRegion | null;
 };
 
@@ -28,7 +28,7 @@ export const mapStateToProps = (state: AppState, { location }: { location: numbe
 
     return {
         isCreating: getAnnotationMode(state) === Mode.REGION && getCreatorStatus(state) !== CreatorStatus.pending,
-        isRotated: !!getRotation(state),
+        rotation: getRotation(state),
         staged: isCreatorStagedRegion(staged) ? staged : null,
     };
 };

package/src/region/RegionCreationManager.tsx

@@ -14,6 +14,13 @@ export default class RegionManager extends BaseManager {
             this.root = ReactDOM.createRoot(this.reactEl);
         }
 
-        this.root.render(<RegionCreationContainer targetType={this.targetType} referenceEl={this.referenceEl} location={this.location} {...props} />);
+        this.root.render(
+            <RegionCreationContainer
+                targetType={this.targetType}
+                referenceEl={this.referenceEl}
+                location={this.location}
+                {...props}
+            />,
+        );
     }
 }

package/src/region/RegionCreator.scss

@@ -1,7 +1,6 @@
 $region_cursor_32: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAA8UlEQVRYCe1Vyw6DIBBcafkPDxjb9P8/pQcTD/4HkZZpe1qeEQyHsgeTXZbZcRiUqEdXoLECQ835LxsxvMEGX7/yQmmuxtELsW6bt16dAKbwYSFS6BV4nBGQG5HCPkzAHveOM7exp4bE1g8TAOh9moLYX25xU2LzKR6InTlnXJ0ANyAfyPOqBHJMxwkUeYCDHcmTCsBMCWAR6slRJHlPAf6YZzLGODy01iSldOpCCHouC+UQcDbzAgiE4qZUaOlT51i+PHkEobewE/ABgoeM7bn4wHNqzU3YCTRXIMcn3h6Y8HcFiv6GXvBe7Ap0Bf5KgTeoYIC/a04wgAAAAABJRU5ErkJggg==';
 $region_cursor_32_2x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABlmWCKAAABWUlEQVR4Ae2YOxKDIBCGNaM5R4pYWOT+B0lhYQrPEZ1JGGcoZIy6Lj4IH40DLAt8+8srSUgQgAAEIAABCEAAAnESSM867Y9JmrGlJi1pf1li9M822dknd7/dREN8NY3IHgWIcB1oPBdZqVLsVFCAJRHK113dtbsFCtg78iZib9Nn7vTbmshenbJdsihgF8wjnZRF0ZdWdT1S+7tI+8+7nlGAS+Ss+bX7/Nx8UMAcoaPr506A2vGhAC3Brdq7J76t+oleAQDYSlqh+FW/CHk6meVSP77WiOh/gUUvp1NytpF7lGXSdd2U6aCubds+n+fuxXBgNshkWZY8q6ovQwEDNOsz3hQgHcLa26DtBwVYEsqveheQRsKsGbwIKYPmtXn02yAAvOopQGcoIMCgeR0yCvCKM0Bn0StAfReQBp2ToJQY9hCAAAQgAAEIQAACEIAABCAAAQhAwDOBLxaXQ2IYNsXoAAAAAElFTkSuQmCC';
 $region_cursor_32_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAYKADAAQAAAABAAAAYAAAAACK+310AAACaUlEQVR4Ae3bwUrDQBDG8VTE+Bg9CD0IBd//IYSCh4KHPobxopuDYQgGOtNvdhvy39O2zc5uf9Odpol2HQ0BBBBAAAEEEEAAAQQQQAABBBBAAAEEEEAAgXSBXfoMdzDBT2mZy9iVFo3/EB3IOI0ACdA4hqM8hkeudODLfi9Z+eflIonDDpAwxoOQgLidZOTmSpBV85YRVfmya2AHWI0GfRLQAN1OuekSZCGWfkxl/4hjB9gsNOiTgAbodsrVlKBSCr7Kwnu7+Fl/KGXkefbc3T9kBzROEQlonIDVlCDr9Ho4dMMwdH3fdx/ns30p3M8+21laGDtgSabS8ySgEvTSNKssQUtvxvt8xrUd7xrYAV4x8fEkQAzqDbe5EuS9BO0F9R7PDvCKiY8nAWJQb7hNlKClS81erIzj2QEZqo6YJMCBlXEoCchQdcQkAQ6sjENJQIaqI2b6WVDFy7y9aq6aZ03sAMenNeNQEpCh6ogZ/seCa+ewZeHteOy+y52sW9t4N+yvjXfFbm1PJcb76TSFqVmC0r8DpndVOiO+xbOvRfvqeNF1RMdVTcD4SVM0i67aAYp1RWJULUGRBf43JuOmvJ2nZgniS9jKN+iTgAbodsr07wDVdi5nU/xpos0cfY0AJUjjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI5CAsJ0moEkQOMYjkICwnSagSRA4xiOQgLCdJqBJEDjGI6SfkcsvLLZQC5Hz0B4qBGgBGkciYIAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIIIIAAAggggAACCCCAAAIITAK/BlNVeN572e8AAAAASUVORK5CYII=';
-
 $region_cursor_new: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAAEEfUpiAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAAFEUlEQVRYCcVXeUyjVRD/erCl5SjtrpblWHbxADlTD0TDESIak0UJUYyE/zAhGo7gP+oaMDEhIRFNiCRG4A8NmGACwYsAG0lIIBSMCBSCrRDCXbkRiq2bbvv5m9qv2+srn3UTJ5nO++bNmzdv5r2ZKcMEgp6entfAF9Gc2EMglsZOLg1OTk7Gj4+PP6KxP+Tn57O+3CfBkHsyL29sbHzqyWBmZ2eLwfDc1TnvZiwtLanBsRcWFpJ+tzVOKdePDDSqu7v7g8nJyS8wDvec5Ma0MjYrK+tx0Ac5piAqMhgMLwWTJGNZvV7PK+QUIKG5ubmbgTSJDw4OHJi4CtQA3cfkBkSlLS0tWzab7f3s7Oy60tJSLXhuz5FzbAqF4g48OpCamsrrrCgIqvf39xdAJcCAQNtxWwcUCMYU9/b2vpqXl0cueTkURWLXhaQzsAUFBez8/HxJMEXu2+Jr1vb2NtPR0aELDw9/D+PbbW1t5F4/8FMgk8n+hFRGQkKCIikpyYqbpRoaGkpUqVSjeAifYM5vjZ9WF+NKc3PzQUNDwzP4jgBeHx0dvQVK11YQKPr6+t5dX1//rbW19XWEbnl8fHzh8PBwGqsFK/HciR6lCij4CJ6LBY//0yWiXS45HA4LUcFb+ghGTE9Ps6enp1ahSgI6RKlUhp+dnf0hRElABWRVdHS0XIgSXgVClQRUkJKSwqysrMwik+n29vZ+Pjo6+hIKA8rSRp4QgYfD9vf3t4F5HUhVgfIUXSDeBII5NyhGRkbewZemvLxcqdPppjs7Ow2Ey8vLP4Hvd4V9Mw/tEga8u7u7+9XOzk764OBgm91uFyOd1+Non2VmZn6OecoXQUG6ubn5rdFopNwXA1ROTEw0g8YBvTblcwxrsViOV1dXHXDi26DFcrn8xbW1tVookAIvBFKchMVGPN9FPOVfhoeHF0CNjY2NKZjzsoJPG/mCStgDwKsIpUGtVqdj7FVr8S0IyCIKZcCiKUjD/yFEfpKYTKYncPwXMCbn8wUtZPuCKSQDZDMzMwkoyLeRYswodlSjKFcJCqIQq4IZQOtF2FiGwsBQiqqtrf0O36f305CLDPA6BB6T05C6urrvKdXdD0P+lQGcNSiPznxbX1/vNATtA3VdIYVG0KvmNiaKboEpKipys2CEHM3rD8hXFjSz5chZP2LyLvDCfOVWwjMg70RQs0R1LiMjg0WCdAwMDFAyfA6YB3zWhU+DZgOvASOBglI35C7Oa2KxmM3JyXE0NTV9HBsb+zXW/A40azQaBoaVREZGpotEIimqOUOyEonESn8mkpOTpyBnB1LvywvBnhPNUVypr6IM9heQWgYGSfktZPpKtMPX0EKapNJ7kTSbzezY2Nhj1dXVS0jibxYXF89hCRkSUkjICEIKB1FyrXpra+sbavxQchcrKyspST0CvAF8VKvVFiBUehSBhaqqKgoL5W7ey37PdEgFAM5qjjqNYFmWKAPXs/Hx8dS+mIB3gNKampoYq9XqQF8siYmJof6IQsCtx9AbnIq8WUG/yANR7e3tz5eUlHzY1dX1EGJuKysr+zUuLm4ROSoLueESPKQKCwuz486c5ebm2s7Pz2+lpaWNYW3IoeCsIoOpTFKVfxj4VGJiYj6oFphGFPX2jampKf0ioKKi4hUX/zIorfM7sB8DQkKA1nH3gsaciymkSpz8Ck7tAB7i+wxoc8lwcvj8B0I1gFvvS0kfZxzNcfH325hb+Dfx/eE8ndH+AwAAAABJRU5ErkJggg==';
 $region_cursor_new_2x: 'data:image/png;base64,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';
 $region_cursor_new_3x: 'data:image/png;base64,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';
@@ -10,8 +9,15 @@ $region_cursor_new_3x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCA
     $offset_x: 9;
     $offset_y: 4;
 
-    cursor: url($region_cursor_new) $offset_x $offset_y, auto; /* Legacy */
-    cursor: image-set(url($region_cursor_new) 1x, url($region_cursor_new_2x) 2x, url($region_cursor_new_3x) 3x) $offset_x $offset_y, auto; /* Webkit */ /* stylelint-disable-line */
+    cursor:
+        url($region_cursor_new) $offset_x $offset_y,
+        auto; /* Legacy */
+
+    /* stylelint-disable unit-no-unknown */
+    cursor:
+        image-set(url($region_cursor_new) 1x, url($region_cursor_new_2x) 2x, url($region_cursor_new_3x) 3x) $offset_x $offset_y,
+        auto; /* Webkit */
+    /* stylelint-enable unit-no-unknown */
 }
 
 .ba-RegionCreator-rect {