box-annotations 4.0.0-beta.8 → 4.0.1-beta.1

package/src/drawing/DrawingTarget.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import noop from 'lodash/noop';
+import DecoratedDrawingPath from './DecoratedDrawingPath';
+import DrawingPathGroup from './DrawingPathGroup';
+import { DrawingSVGRef } from './DrawingSVG';
+import { getCenter, getShape } from './drawingUtil';
+import { MOUSE_PRIMARY } from '../constants';
+import { TargetDrawing } from '../@types';
+import './DrawingTarget.scss';
+
+export type Props = {
+    annotationId: string;
+    className?: string;
+    isActive?: boolean;
+    onSelect?: (annotationId: string) => void;
+    rootEl: DrawingSVGRef | null;
+    target: TargetDrawing;
+};
+
+export type DrawingTargetRef = HTMLAnchorElement;
+
+export const DrawingTarget = (props: Props, ref: React.Ref<DrawingTargetRef>): JSX.Element => {
+    const {
+        annotationId,
+        className,
+        isActive = false,
+        onSelect = noop,
+        rootEl,
+        target: { path_groups: pathGroups },
+    } = props;
+    const shape = getShape(pathGroups);
+    const { x: centerX, y: centerY } = getCenter(shape);
+
+    const handleFocus = (): void => {
+        onSelect(annotationId);
+    };
+    const handleMouseDown = (event: React.MouseEvent<DrawingTargetRef>): void => {
+        if (event.buttons !== MOUSE_PRIMARY) {
+            return;
+        }
+        const activeElement = document.activeElement as HTMLElement;
+
+        event.preventDefault(); // Prevents focus from leaving the button immediately in some browsers
+        event.stopPropagation(); // Prevents document-level deselect event handlers from executing
+
+        // IE11 won't apply the focus to the SVG anchor, so this workaround attempts to blur the existing active element.
+        // If we don't blur it, we cannot re-focus it next time, since it was already focused and never got blurred.
+        if (activeElement && activeElement !== event.currentTarget && activeElement.blur) {
+            activeElement.blur();
+        }
+
+        if (event.currentTarget.focus) {
+            // Buttons do not receive focus in Firefox and Safari on MacOS; triggers handleFocus
+            event.currentTarget.focus();
+        } else {
+            // IE11 does not support focus function; call handleFocus directly
+            handleFocus();
+        }
+    };
+
+    return (
+        // eslint-disable-next-line jsx-a11y/anchor-is-valid
+        <a
+            ref={ref}
+            className={classNames('ba-DrawingTarget', className, { 'is-active': isActive })}
+            data-resin-itemid={annotationId}
+            data-resin-target="highlightDrawing"
+            data-testid={`ba-AnnotationTarget-${annotationId}`}
+            href="#"
+            onFocus={handleFocus}
+            onMouseDown={handleMouseDown}
+            role="button"
+            tabIndex={0}
+        >
+            <rect
+                fill="transparent"
+                transform={`translate(-${centerX * 0.1}, -${centerY * 0.1}) scale(1.1)`}
+                {...shape}
+            />
+            {pathGroups.map(({ clientId: pathGroupClientId, paths, stroke }) => (
+                <DrawingPathGroup key={pathGroupClientId} isActive={isActive} rootEl={rootEl} stroke={stroke}>
+                    {/* Use the children render function to pass down the calculated strokeWidthWithBorder value */}
+                    {strokeWidthWithBorder =>
+                        paths.map(({ clientId: pathClientId, points }) => (
+                            <DecoratedDrawingPath
+                                key={pathClientId}
+                                borderStrokeWidth={strokeWidthWithBorder}
+                                isDecorated
+                                points={points}
+                            />
+                        ))
+                    }
+                </DrawingPathGroup>
+            ))}
+        </a>
+    );
+};
+
+export default React.forwardRef(DrawingTarget);

package/src/drawing/SVGFilterContext.js

@@ -0,0 +1,5 @@
+import { createContext } from 'react';
+
+const SVGFilterContext = createContext('');
+
+export default SVGFilterContext;

package/src/drawing/actions.ts

@@ -0,0 +1,48 @@
+import { AppThunkDispatch, AppState, getCreatorStatus, CreatorStatus } from '../store';
+import { createAnnotationAction } from '../store/annotations';
+import { getFileVersionId } from '../store/options';
+import { PathGroup } from '../@types';
+import { resetDrawingAction, setDrawingLocationAction } from '../store/drawing';
+
+export type CreateArg = {
+    location: number;
+    message: string;
+    pathGroups: Array<PathGroup>;
+};
+
+export const createDrawingAction = (arg: CreateArg) => (dispatch: AppThunkDispatch, getState: () => AppState) => {
+    const { location, message, pathGroups } = arg;
+    const state = getState();
+    const newAnnotation = {
+        description: {
+            message,
+            type: 'reply' as const,
+        },
+        // eslint-disable-next-line @typescript-eslint/camelcase
+        file_version: {
+            id: getFileVersionId(state),
+        },
+        target: {
+            location: {
+                type: 'page' as const,
+                value: location,
+            },
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            path_groups: pathGroups,
+            type: 'drawing' as const,
+        },
+    };
+
+    return dispatch(createAnnotationAction(newAnnotation));
+};
+
+export const setupDrawingAction = (location: number) => (dispatch: AppThunkDispatch, getState: () => AppState) => {
+    const state = getState();
+    const creatorStatus = getCreatorStatus(state);
+
+    if (creatorStatus === CreatorStatus.staged) {
+        dispatch(resetDrawingAction());
+    }
+
+    return dispatch(setDrawingLocationAction(location));
+};

package/src/drawing/drawingUtil.ts

@@ -0,0 +1,106 @@
+import * as uuid from 'uuid';
+import { Annotation, AnnotationDrawing, PathGroup, Position, Shape } from '../@types';
+
+export function addClientIds({ paths, ...groupRest }: PathGroup): PathGroup {
+    return {
+        clientId: uuid.v4(),
+        paths: paths.map(path => ({
+            clientId: uuid.v4(),
+            ...path,
+        })),
+        ...groupRest,
+    };
+}
+
+export function formatDrawing(annotation: AnnotationDrawing): AnnotationDrawing {
+    const {
+        target: { path_groups: pathGroups, ...targetRest },
+        ...rest
+    } = annotation;
+
+    return {
+        target: {
+            // eslint-disable-next-line @typescript-eslint/camelcase
+            path_groups: pathGroups.map(pathGroup => addClientIds(pathGroup)),
+            ...targetRest,
+        },
+        ...rest,
+    };
+}
+
+export function getCenter({ height, width, x, y }: Shape): Position {
+    return { x: x + width / 2, y: y + height / 2 };
+}
+
+// We use cubic Bezier curves to generate path commands for better smoothing.
+// For every data point, we generate extra two points using adjacent data points.
+// Then we use the first generated point and the data point as two control points
+// and the second generated point as the destination point to form a (C)urve command.
+export const getPathCommands = (points?: Position[]): string => {
+    if (!points || !points.length) {
+        return '';
+    }
+
+    const d = points
+        .map(({ x, y }, index, array) => {
+            if (index === 0) {
+                return `M ${x} ${y}`;
+            }
+
+            const prevPoint = array[index - 1];
+            const nextPoint = array[index + 1];
+            if (!prevPoint || !nextPoint) {
+                return '';
+            }
+
+            const xc1 = (x + prevPoint.x) / 2;
+            const yc1 = (y + prevPoint.y) / 2;
+            const xc2 = (x + nextPoint.x) / 2;
+            const yc2 = (y + nextPoint.y) / 2;
+
+            return `C ${xc1} ${yc1}, ${x} ${y}, ${xc2} ${yc2}`;
+        })
+        .join(' ')
+        .trim();
+
+    return d;
+};
+
+export function getShape(pathGroups: PathGroup[]): Shape {
+    let maxX = 0;
+    let maxY = 0;
+    // Initialize mins with MAX_VALUE so that any possible
+    // input value of the first point can be captured by Math.min
+    let minX = Number.MAX_VALUE;
+    let minY = Number.MAX_VALUE;
+
+    pathGroups.forEach(({ paths }) => {
+        paths.forEach(({ points }) => {
+            points.forEach(({ x, y }) => {
+                maxX = Math.max(maxX, x);
+                maxY = Math.max(maxY, y);
+                minX = Math.min(minX, x);
+                minY = Math.min(minY, y);
+            });
+        });
+    });
+
+    return {
+        height: Math.max(0, maxY - minY),
+        width: Math.max(0, maxX - minX),
+        x: minX === Number.MAX_VALUE ? 0 : minX,
+        y: minY === Number.MAX_VALUE ? 0 : minY,
+    };
+}
+
+export function isDrawing(annotation: Annotation): annotation is AnnotationDrawing {
+    return annotation?.target?.type === 'drawing';
+}
+
+export function centerDrawing(pathGroups: PathGroup[]): Position {
+    return getCenter(getShape(pathGroups));
+}
+
+export function isVectorEffectSupported(): boolean {
+    return 'vector-effect' in document.body.style;
+}

package/src/drawing/index.ts

@@ -0,0 +1,2 @@
+export * from './drawingUtil';
+export { default as DrawingManager } from './DrawingManager';

package/src/highlight/HighlightAnnotations.scss

@@ -0,0 +1,12 @@
+.ba-HighlightAnnotations-creator {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: none;
+    width: 100%;
+    height: 100%;
+}
+
+.ba-HighlightAnnotations-popup {
+    pointer-events: auto;
+}

package/src/highlight/HighlightAnnotations.tsx

@@ -0,0 +1,144 @@
+import * as React from 'react';
+import HighlightCanvas from './HighlightCanvas';
+import HighlightList from './HighlightList';
+import HighlightSvg from './HighlightSvg';
+import HighlightTarget from './HighlightTarget';
+import PopupHighlight from '../components/Popups/PopupHighlight';
+import PopupHighlightError from '../components/Popups/PopupHighlightError';
+import { AnnotationHighlight } from '../@types';
+import { CreateArg } from './actions';
+import { CreatorItemHighlight, CreatorStatus, SelectionArg, SelectionItem } from '../store';
+import { getBoundingRect, getShapeRelativeToContainer } from './highlightUtil';
+import './HighlightAnnotations.scss';
+
+type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationHighlight[];
+    createHighlight?: (arg: CreateArg) => void;
+    isCreating: boolean;
+    isPending: boolean;
+    isPromoting: boolean;
+    isSelecting: boolean;
+    location: number;
+    selection: SelectionItem | null;
+    setActiveAnnotationId: (annotationId: string | null) => void;
+    setIsPromoting: (isPromoting: boolean) => void;
+    setReferenceId: (uuid: string) => void;
+    setSelection: (selection: SelectionArg | null) => void;
+    setStaged: (staged: CreatorItemHighlight | null) => void;
+    setStatus: (status: CreatorStatus) => void;
+    staged?: CreatorItemHighlight | null;
+};
+
+const HighlightAnnotations = (props: Props): JSX.Element => {
+    const {
+        activeAnnotationId,
+        annotations = [],
+        isCreating = false,
+        isPending = false,
+        isPromoting = false,
+        isSelecting = false,
+        selection,
+        setActiveAnnotationId,
+        setIsPromoting,
+        setReferenceId,
+        setSelection,
+        setStaged,
+        setStatus,
+        staged,
+    } = props;
+    const canCreate = isCreating || isPromoting;
+
+    const handleAnnotationActive = (annotationId: string | null): void => {
+        setActiveAnnotationId(annotationId);
+    };
+
+    const stageSelection = React.useCallback((): void => {
+        if (!selection) {
+            return;
+        }
+
+        const { containerRect, location, rects } = selection;
+
+        setStaged({
+            location,
+            shapes: rects.map(rect => ({
+                ...getShapeRelativeToContainer(rect, containerRect),
+                type: 'rect',
+            })),
+        });
+        setStatus(CreatorStatus.staged);
+    }, [selection, setStaged, setStatus]);
+
+    const handleCancel = (): void => {
+        setSelection(null);
+    };
+
+    const handlePromote = (): void => {
+        stageSelection();
+        setIsPromoting(true);
+    };
+
+    const handleStagedMount = (uuid: string): void => {
+        setReferenceId(uuid);
+    };
+
+    React.useEffect(() => {
+        if (!isSelecting || isPending) {
+            return;
+        }
+
+        setStaged(null);
+        setStatus(CreatorStatus.init);
+    }, [isSelecting, isPending, setStaged, setStatus]);
+
+    React.useEffect(() => {
+        if (!isCreating || !selection || selection.hasError || isPending) {
+            return;
+        }
+
+        stageSelection();
+    }, [isCreating, isPending, selection, stageSelection]);
+
+    return (
+        <>
+            {/* Layer 1: Saved annotations */}
+            <HighlightList activeId={activeAnnotationId} annotations={annotations} onSelect={handleAnnotationActive} />
+
+            {/* Layer 2: Staged (unsaved) highlight target, if any */}
+            {canCreate && staged && (
+                <div className="ba-HighlightAnnotations-target">
+                    <HighlightCanvas shapes={staged.shapes} />
+                    <HighlightSvg>
+                        <HighlightTarget
+                            annotationId="staged"
+                            isActive
+                            onMount={handleStagedMount}
+                            shapes={staged.shapes}
+                        />
+                    </HighlightSvg>
+                </div>
+            )}
+
+            {/* 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>
+            )}
+
+            {/* Layer 3b: Highlight error popup */}
+            {selection && selection.hasError && (
+                <div className="ba-HighlightAnnotations-popup">
+                    <PopupHighlightError onCancel={handleCancel} shape={getBoundingRect(selection.rects)} />
+                </div>
+            )}
+        </>
+    );
+};
+
+export default HighlightAnnotations;

package/src/highlight/HighlightCanvas.scss

@@ -0,0 +1,9 @@
+.ba-HighlightCanvas {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    mix-blend-mode: multiply;
+    pointer-events: none;
+}

package/src/highlight/HighlightCanvas.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { bdlYellow, black, white } from 'box-ui-elements/es/styles/variables';
+import { Rect } from '../@types';
+import './HighlightCanvas.scss';
+
+export type CanvasShape = Rect & { isActive?: boolean; isHover?: boolean };
+
+export type Props = {
+    shapes: CanvasShape[] | CanvasShape;
+};
+
+export default class HighlightCanvas extends React.PureComponent<Props> {
+    static defaultProps = {
+        shapes: [],
+    };
+
+    canvasRef: React.RefObject<HTMLCanvasElement> = React.createRef();
+
+    componentDidMount(): void {
+        this.scaleCanvas();
+        this.renderRects();
+    }
+
+    componentDidUpdate(): void {
+        this.clearCanvas();
+        this.renderRects();
+    }
+
+    getContext(): CanvasRenderingContext2D | null {
+        const { current: canvasRef } = this.canvasRef;
+        return canvasRef?.getContext('2d') ?? null;
+    }
+
+    scaleCanvas(): void {
+        const { current: canvasRef } = this.canvasRef;
+
+        if (!canvasRef) {
+            return;
+        }
+
+        canvasRef.width = canvasRef.offsetWidth;
+        canvasRef.height = canvasRef.offsetHeight;
+    }
+
+    clearCanvas(): void {
+        const { current: canvasRef } = this.canvasRef;
+        const context = canvasRef && canvasRef.getContext('2d');
+
+        if (!canvasRef || !context) {
+            return;
+        }
+
+        context.clearRect(0, 0, canvasRef.width, canvasRef.height);
+    }
+
+    renderRects(): void {
+        const { shapes } = this.props;
+        const { current: canvasRef } = this.canvasRef;
+        const context = canvasRef && canvasRef.getContext('2d');
+        const canvasHeight = canvasRef?.height ?? 0;
+        const canvasWidth = canvasRef?.width ?? 0;
+        const shapesArray = Array.isArray(shapes) ? shapes : [shapes];
+
+        if (!context) {
+            return;
+        }
+
+        shapesArray.forEach(rect => {
+            const { height, isActive, isHover, width, x, y } = rect;
+            const rectHeight = (height / 100) * canvasHeight;
+            const rectWidth = (width / 100) * canvasWidth;
+            const x1 = (x / 100) * canvasWidth;
+            const y1 = (y / 100) * canvasHeight;
+
+            context.save();
+
+            // Draw the highlight rect
+            context.fillStyle = bdlYellow;
+            context.globalAlpha = isActive || isHover ? 0.66 : 0.33;
+            context.fillRect(x1, y1, rectWidth, rectHeight);
+            context.restore();
+            context.save();
+
+            // Draw the white border
+            context.strokeStyle = white;
+            context.lineWidth = 1;
+            context.strokeRect(x1, y1, rectWidth, rectHeight);
+
+            // If annotation is active, apply a shadow
+            if (isActive) {
+                const imgData = context.getImageData(x1, y1, rectWidth, rectHeight);
+
+                context.save();
+                context.shadowColor = black;
+                context.shadowBlur = 10;
+
+                context.strokeRect(x1, y1, rectWidth, rectHeight);
+                context.putImageData(imgData, x1, y1);
+                context.restore();
+            }
+
+            context.restore();
+        });
+    }
+
+    render(): JSX.Element {
+        return <canvas ref={this.canvasRef} className="ba-HighlightCanvas" />;
+    }
+}

package/src/highlight/HighlightContainer.tsx

@@ -0,0 +1,64 @@
+import { connect } from 'react-redux';
+import HighlightAnnotations from './HighlightAnnotations';
+import withProviders from '../common/withProviders';
+import { AnnotationHighlight } from '../@types';
+import {
+    AppState,
+    CreatorItemHighlight,
+    CreatorStatus,
+    getActiveAnnotationId,
+    getAnnotationMode,
+    getAnnotationsForLocation,
+    getCreatorStagedForLocation,
+    getCreatorStatus,
+    getIsPromoting,
+    getIsSelecting,
+    getSelectionForLocation,
+    isCreatorStagedHighlight,
+    Mode,
+    SelectionItem,
+    setActiveAnnotationIdAction,
+    setIsPromotingAction,
+    setReferenceIdAction,
+    setSelectionAction,
+    setStagedAction,
+    setStatusAction,
+} from '../store';
+import { isHighlight } from './highlightUtil';
+
+export type Props = {
+    activeAnnotationId: string | null;
+    annotations: AnnotationHighlight[];
+    isCreating: boolean;
+    isPending: boolean;
+    isPromoting: boolean;
+    isSelecting: boolean;
+    selection: SelectionItem | null;
+    staged: CreatorItemHighlight | null;
+};
+
+export const mapStateToProps = (state: AppState, { location }: { location: number }): Props => {
+    const staged = getCreatorStagedForLocation(state, location);
+
+    return {
+        activeAnnotationId: getActiveAnnotationId(state),
+        annotations: getAnnotationsForLocation(state, location).filter(isHighlight),
+        isCreating: getAnnotationMode(state) === Mode.HIGHLIGHT,
+        isPending: getCreatorStatus(state) === CreatorStatus.pending,
+        isPromoting: getIsPromoting(state),
+        isSelecting: getIsSelecting(state),
+        selection: getSelectionForLocation(state, location),
+        staged: isCreatorStagedHighlight(staged) ? staged : null,
+    };
+};
+
+export const mapDispatchToProps = {
+    setActiveAnnotationId: setActiveAnnotationIdAction,
+    setIsPromoting: setIsPromotingAction,
+    setReferenceId: setReferenceIdAction,
+    setSelection: setSelectionAction,
+    setStaged: setStagedAction,
+    setStatus: setStatusAction,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(withProviders(HighlightAnnotations));

package/src/highlight/HighlightCreator.scss

@@ -0,0 +1,12 @@
+$text_cursor_32: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACPTkDJAAABrklEQVRYCWNgGAWjITAaAqMhQCAEfv36NeX///9/gBgO/v379/f716/TCWglSpqRkKq/f//+tjAxYfn8+TNcKS8vL8OJM2f+MDMzs8IFacUA+RTkY5D3NVRUYKHwBxQytLITq7nIDgBa/g3mEmz0169fP3z58qUfKMeG1TAkQRYkNlHMT58+/Q3w8eF8/vw5TvXiEhL8nd3daTq6uiA1hTgVAiWY8Elik3v86NFnZMvZ2NgY/AMCGOISEhgEBAXBWl6+eMFQUVrKxcjImIjNDGQxkh2ArBnETkpJYdDS1mYwMjb+P3vu3N8w+RdAR3BxcfHD+Lhoih0wY9o0huVLlzIcO3KEUVtHh+QoJVkDuk8mTpnyhZOT89/ZM2f4gEFOMFuj66c4BGxsbVnu3r37WkxMDB786Jbg41McAknx8RzmFhbKRw8fZrh69SrcLgkJCYZv3759hAvgYJDsAFk5OV5JSUkGWE64eOECAwiDAMwBwGzI0NHdDSor5uOwl3RhUIEDKwl//vz5HcTHBUgpiAi6BLkygjlg5FZGSEFO/8qIYFyNKhgNgdEQGKohAAD+bzKe7UZRtgAAAABJRU5ErkJggg==';
+$text_cursor_32_2x: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAABGdBTUEAALGPC/xhBQAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABlmWCKAAADvElEQVR4Ae2ZzUsbQRTA37a1BSkVhNjEg400h2ouQiWpaFIpftGmxP4FQqs9RLykiIj0JD3YIgVvFnvrUYppUq0kSk9Wi0URcrNgtGCKFyW9JKHZvrfNVjTJmt3R3bSdBy+zO/ve7rzfvJnMzgJw4QQ4AU6AE+AEOAFOgBPgBDgBToAT4AQ4AU5AJQFRFGtQw6hJ1JOEbMi2RuVjStc8G9BJgR+/Hi6ViATWhmBkSbzHxVuNjXBwcKB4u4qKClheXSWblCAIlxSNdbp4Tqfn/LuPKTQEbthsImkBKZkhcBoZ8Ai7N4KaKqKbyYZsyackhBkAjuVt1HYa06hKc8qXbMRtWMYKZIZSdQIvLqP2oSo9RxVYZgAqnnYTbS+qsD9uehkrnKivUCMIwXLcQMv5BS1Oan3SqZT4xO8XPi4uQjqdVusu2ZtMJnA4nTA4NCReNZvvYOUbhNCGSSdqumHWSZcMCMzMCOH5ec3BU1v39vbgfSgEXo9H+B6PU9AEoZeusYguAOLxOEsbj/jSWuPF2Jg8BzBPproMgSMR5Dmx1taCr78f6urrwVJdDVtbWzA1OQkf5ubyWAN8XlmR6+3ygdZSlwxQapzL7YZAMAj3vV4wVVWBmMmA3W6HlxMT0NHVldeVhkNWaGJkEsMBrK+twbtAAAZ8PqDldEtTE7ydnpaC6u3rYwquGGfDASQSCXg6MgKR8O/FYTKZhLnZWant1222YmJgsimJOYAisGGw7tZWuGa1ghWVpLy8XCrP8sdwAJWVldJ4p//4TCYjxmIxIYVZoJcYPgSej49LC5yN9fWNZqdTuNvRAc9GR/WKHwwH0NDQIAW7EInE9vf3pePmlhbdABg+BKLRqJQBvoGB23X490cTX7XF8hMJUOfIC54zA2J4BowMD8OnpSUK8IrL5YKvm5vwwOs9HwoGhfjubt7Aab2QlR/ygdbS8Az4trMDD3t6cto/6Pfn1MkVDodDPozKB1pLXTLAbDZrbV+OH+0r0hth9sLrHAOVFboA8HZ3i+2dnVBWVqayeYfm9Dp8z+OBQChEr8M0NyyiTh1alMgRvqNLcsKeoGymtVxAx1PZENElA7J9Q1tixewbFupKmvDoNfAxKm2E5J8hC3kXqGeeBLEn6CsPjUU3qtKWF22J/dkUxQC28dxwOY0MoODbUJWClwMlG7JlnrzkG7KWzAsNzAD+ZYi1F/5qf8wA+tqrVkrmyxAzfIz8//48zkyQ34AT4AQ4AU6AE+AEOAFOgBPgBDgBToAT4AT0JvAL80N/mFc/WlQAAAAASUVORK5CYII=';
+$text_cursor_32_3x: 'data:image/png;base64,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';
+
+@mixin ba-HighlightCreator-cursor {
+    /* The custom cursor focus point (10, 16) is not the center of the image (16, 16) */
+    $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 */
+}