@khanacademy/perseus 19.1.4 → 19.1.6

package/src/components/highlighting/ui/highlight-renderer.tsx

@@ -1,172 +0,0 @@
-/* eslint-disable react/no-unsafe */
-/**
- * This component, given a single DOMHighlight, draws highlight rectangles in
- * the same absolute position as the highlighted content, as computed via
- * `getClientRects`.
- *
- * TODO(mdr): Many things can affect the correct positioning of highlighting,
- *     and this component does not attempt to anticipate them. If we start
- *     using this highlighting library on content with a more dynamic layout,
- *     we should add a hook to allow the parent to `forceUpdate` the
- *     `HighlightRenderer`.
- */
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {
-    getClientRectsForTextInRange,
-    getRelativePosition,
-    getRelativeRect,
-} from "./util";
-
-import type {DOMHighlight, Position, Rect, ZIndexes} from "./types";
-
-type Props = {
-    // The DOMHighlight to render.
-    highlight: DOMHighlight;
-    // A unique key corresponding to the given `highlight`.
-    highlightKey: string;
-    // This component's `offsetParent` element, which is the nearest ancestor
-    // with `position: relative`. This will enable us to choose the correct
-    // CSS coordinates to align highlights and tooltips with the target
-    // content.
-    offsetParent: Element;
-    // The z-indexes to use when rendering tooltips above content, and
-    // highlights below content.
-    zIndexes: ZIndexes;
-};
-
-type State = {
-    // The set of rectangles that cover this highlight's content, relative to
-    // the offset parent. This cache is updated on mount and on changes to
-    // the `highlight` and `offsetParent` props.
-    //
-    // We perform this caching because HighlightSetRenderer uses this
-    // component's `isHovered` function to access the rectangles every time the
-    // user's mouse moves, in order to check the hover state, and recomputing
-    // them on every mousemove seems like it could be expensive on older
-    // devices (though tbf that's just a gut instinct, not the result of
-    // testing on older devices).
-    cachedHighlightRects: ReadonlyArray<Rect>;
-};
-
-class HighlightRenderer extends React.PureComponent<Props, State> {
-    state: State = {
-        cachedHighlightRects: this._computeRects(this.props),
-        // @ts-expect-error - TS2322 - Type '{ cachedHighlightRects: readonly Rect[]; tooltipIsHovered: boolean; }' is not assignable to type 'HighlightRendererState'.
-        tooltipIsHovered: false,
-    };
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        if (
-            this.props.highlight !== nextProps.highlight ||
-            this.props.offsetParent !== nextProps.offsetParent
-        ) {
-            this.setState({
-                cachedHighlightRects: this._computeRects(nextProps),
-            });
-        }
-    }
-
-    /**
-     * Compute the set of rectangles that cover the highlighted content, with
-     * coordinates relative to the offset parent. That way, we can use them
-     * for CSS positioning.
-     */
-    _computeRects(props: Props): ReadonlyArray<Rect> {
-        const {highlight, offsetParent} = props;
-
-        // Get the set of rectangles that covers the range's text, relative to
-        // the offset parent.
-        const clientRects = getClientRectsForTextInRange(highlight.domRange);
-        const {left, top} = offsetParent.getBoundingClientRect();
-        const relativeRects = clientRects.map((rect) =>
-            getRelativeRect(rect, {left, top}),
-        );
-
-        return relativeRects;
-    }
-
-    /**
-     * Return whether the given mouse position (coordinates relative to this
-     * component's offset parent) is hovering over the given rectangle
-     * (coordinates also relative to this component's offset parent).
-     */
-    _rectIsHovered(rect: Rect, mouseOffsetPosition: Position): boolean {
-        const positionWithinRect = getRelativePosition(mouseOffsetPosition, {
-            left: rect.left,
-            top: rect.top,
-        });
-
-        return (
-            0 <= positionWithinRect.left &&
-            positionWithinRect.left < rect.width &&
-            0 <= positionWithinRect.top &&
-            positionWithinRect.top < rect.height
-        );
-    }
-
-    /**
-     * Return whether the given mouse position (coordinates relative to the
-     * viewport) is hovering over this highlight.
-     */
-    isHovered(mouseClientPosition?: Position | null): boolean {
-        if (!mouseClientPosition) {
-            return false;
-        }
-
-        const {offsetParent} = this.props;
-        const {cachedHighlightRects} = this.state;
-
-        // Convert the client-relative mouse coordinates to be relative to the
-        // offset parent. That way, we can compare them to the cached highlight
-        // rectangles.
-        const {left, top} = offsetParent.getBoundingClientRect();
-        const mouseOffsetPosition = getRelativePosition(mouseClientPosition, {
-            left,
-            top,
-        });
-
-        return cachedHighlightRects.some((rect) =>
-            this._rectIsHovered(rect, mouseOffsetPosition),
-        );
-    }
-
-    render(): React.ReactNode {
-        const rects = this.state.cachedHighlightRects;
-
-        return (
-            <div>
-                {rects.map((rect, index) => (
-                    <div
-                        key={index}
-                        className={css(styles.highlightRect)}
-                        style={{
-                            // NOTE(mdr): We apply `position: absolute` here
-                            //     rather than in Aphrodite styles, because
-                            //     Aphrodite styles are delayed. If this
-                            //     element temporarily has `position: static`,
-                            //     then it'll displace the content, and other
-                            //     highlights rendering during this update will
-                            //     measure the displaced content instead, oops!
-                            position: "absolute",
-                            width: rect.width,
-                            height: rect.height,
-                            top: rect.top,
-                            left: rect.left,
-                            zIndex: this.props.zIndexes.belowContent,
-                        }}
-                    />
-                ))}
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    highlightRect: {
-        background: "#fffabe", // highlighter yellow :)
-    },
-});
-
-export default HighlightRenderer;

package/src/components/highlighting/ui/highlight-set-renderer.tsx

@@ -1,185 +0,0 @@
-/* eslint-disable react/no-unsafe */
-/**
- * Render a set of highlights. See HighlightRenderer for more details about how
- * each highlight is rendered.
- *
- * This component manages the state of the "Remove highlight" tooltip. To
- * determine the currently-hovered highlight, it calls the `isHovered` method
- * on each HighlightRenderer.
- */
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import * as React from "react";
-
-import HighlightRenderer from "./highlight-renderer";
-import HighlightTooltip from "./highlight-tooltip";
-
-import type {DOMHighlightSet, Position, ZIndexes} from "./types";
-
-type Props = {
-    // Whether the highlights are user-editable. If false, highlights are
-    // read-only.
-    editable: boolean;
-    // A set of highlights to render.
-    highlights: DOMHighlightSet;
-    // This component's `offsetParent` element, which is the nearest ancestor
-    // with `position: relative`. This will enable us to choose the correct
-    // CSS coordinates to align highlights and tooltips with the target
-    // content.
-    offsetParent: Element;
-    // A callback indicating that the user would like to remove the highlight
-    // with the given key.
-    onRemoveHighlight: (highlightKey: string) => unknown;
-    // The z-indexes to use when rendering tooltips above content, and
-    // highlights below content.
-    zIndexes: ZIndexes;
-};
-type State = {
-    // If the user is currently hovering over a highlight, this field contains
-    // its key.
-    hoveredHighlightKey: string | null | undefined;
-    // If the user is currently hovering over the "Remove highlight" tooltip,
-    // this field contains the key of the corresponding highlight.
-    hoveringTooltipFor: string | null | undefined;
-};
-
-class HighlightSetRenderer extends React.PureComponent<Props, State> {
-    state: State = {
-        hoveredHighlightKey: null,
-        hoveringTooltipFor: null,
-    };
-
-    // eslint-disable-next-line react/sort-comp
-    _highlightRenderers: {
-        [highlightKey: string]: HighlightRenderer;
-    } = {};
-
-    componentDidMount() {
-        this._updateEditListeners(false, this.props.editable);
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps: Props) {
-        this._updateEditListeners(this.props.editable, nextProps.editable);
-
-        // If we were previously hovering over a highlight that has been
-        // removed, reset the hover state accordingly.
-        if (
-            this.state.hoveredHighlightKey != null &&
-            !(this.state.hoveredHighlightKey in nextProps.highlights)
-        ) {
-            this.setState({hoveredHighlightKey: null});
-        }
-
-        // Similarly, if we were previously hovering over the tooltip for a
-        // highlight that has been removed, reset the hover state accordingly.
-        if (
-            this.state.hoveringTooltipFor != null &&
-            !(this.state.hoveringTooltipFor in nextProps.highlights)
-        ) {
-            this.setState({hoveringTooltipFor: null});
-        }
-    }
-
-    componentWillUnmount() {
-        this._updateEditListeners(this.props.editable, false);
-    }
-
-    /**
-     * Given whether we were previously listening to mousemove events, and
-     * whether we will now listen to mousemove events, add or remove the
-     * listener accordingly.
-     */
-    _updateEditListeners(wasListening: boolean, willListen: boolean) {
-        if (!wasListening && willListen) {
-            window.addEventListener("mousemove", this._handleMouseMove);
-        } else if (wasListening && !willListen) {
-            window.removeEventListener("mousemove", this._handleMouseMove);
-
-            // Additionally, reset the hover state, to ensure that we don't
-            // keep old hover state around.
-            this.setState({
-                hoveredHighlightKey: null,
-                hoveringTooltipFor: null,
-            });
-        }
-    }
-
-    _handleMouseMove: (e: MouseEvent) => void = (e: MouseEvent) => {
-        const mouseClientPosition = {left: e.clientX, top: e.clientY} as const;
-        const hoveredHighlightKey =
-            this._getHoveredHighlightKey(mouseClientPosition);
-        this.setState({hoveredHighlightKey});
-    };
-
-    _getHoveredHighlightKey(
-        mouseClientPosition: Position,
-    ): string | null | undefined {
-        // If we're hovering over the tooltip, the hovered highlight is the
-        // highlight that the tooltip is pointing to.
-        const {hoveringTooltipFor} = this.state;
-        if (typeof hoveringTooltipFor === "string") {
-            return hoveringTooltipFor;
-        }
-
-        // Otherwise, check each highlight renderer to see whether the current
-        // mouse position intersects any of the highlight rectangles.
-        const highlightKeys = Object.keys(this.props.highlights);
-        return highlightKeys.find((key) => {
-            const highlightRenderer = this._highlightRenderers[key];
-            return (
-                highlightRenderer &&
-                highlightRenderer.isHovered(mouseClientPosition)
-            );
-        });
-    }
-
-    _renderTooltip(): null | React.ReactNode {
-        const {hoveredHighlightKey} = this.state;
-        if (hoveredHighlightKey == null) {
-            return null;
-        }
-
-        const hoveredHighlight = this.props.highlights[hoveredHighlightKey];
-
-        return (
-            <HighlightTooltip
-                label={i18n._("Remove highlight")}
-                focusNode={hoveredHighlight.domRange.endContainer}
-                focusOffset={hoveredHighlight.domRange.endOffset}
-                offsetParent={this.props.offsetParent}
-                onClick={() =>
-                    this.props.onRemoveHighlight(hoveredHighlightKey)
-                }
-                onMouseEnter={() =>
-                    this.setState({hoveringTooltipFor: hoveredHighlightKey})
-                }
-                onMouseLeave={() => this.setState({hoveringTooltipFor: null})}
-            />
-        );
-    }
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                {Object.keys(this.props.highlights).map((key) => (
-                    <HighlightRenderer
-                        ref={(r) => {
-                            if (r) {
-                                this._highlightRenderers[key] = r;
-                            } else {
-                                delete this._highlightRenderers[key];
-                            }
-                        }}
-                        key={key}
-                        highlight={this.props.highlights[key]}
-                        highlightKey={key}
-                        offsetParent={this.props.offsetParent}
-                        zIndexes={this.props.zIndexes}
-                    />
-                ))}
-                {this.props.editable && this._renderTooltip()}
-            </div>
-        );
-    }
-}
-
-export default HighlightSetRenderer;

package/src/components/highlighting/ui/highlight-tooltip.tsx

@@ -1,141 +0,0 @@
-/**
- * A tooltip to point to the focus of a highlight.
- *
- * We use the NewTooltip component, which positions itself not by coordinate,
- * but by watching the position of a target DOM element. So, we render a 0x0
- * DOM element, absolute-position it to the position of the the highlight
- * focus, and point the tooltip at that 0x0 element.
- *
- * This technique enables NewTooltip to use its existing visibility-watching
- * and scroll-tracking logic to effectively "watch" the focus of this
- * highlight. So, we get lots of the repositioning logic for free! But we _do_
- * still have to notify the tooltip to remeasure itself when the highlight
- * focus _changes_.
- */
-import Spacing from "@khanacademy/wonder-blocks-spacing";
-import Tooltip from "@khanacademy/wonder-blocks-tooltip";
-import {StyleSheet, css} from "aphrodite";
-import * as React from "react";
-
-import {Log} from "../../../logging/log";
-
-import {getRelativeRect} from "./util";
-
-import type {Rect} from "./types";
-
-type Props = {
-    label: string;
-    onClick: () => unknown;
-    onMouseEnter?: () => unknown;
-    onMouseLeave?: () => unknown;
-    focusNode: Node;
-    focusOffset: number;
-    offsetParent: Element;
-};
-
-class HighlightTooltip extends React.PureComponent<Props> {
-    _getFocusRect(): Rect | null | undefined {
-        const {focusNode, focusOffset, offsetParent} = this.props;
-
-        // Get a range of *just* the focus point of the selection.
-        const focusRange = document.createRange();
-        focusRange.setStart(focusNode, focusOffset);
-        focusRange.setEnd(focusNode, focusOffset);
-
-        // Then, get the bounding box of the collapsed range. This will be a
-        // zero-width rectangle, but still have positioning information, which
-        // we can use the position the tooltip.
-        //
-        // NOTE(mdr): If we used getClientBoundingRect here instead, Safari
-        //     would return an unpositioned rect. But all tested browsers at
-        //     time of writing (latest Chrome, Firefox, Safari) return at least
-        //     one rectangle from getClientRects, and it's well-positioned.
-        const focusRect = focusRange.getClientRects()[0];
-
-        // NOTE(mdr): ...except in the case where the focus is between two
-        //     paragraphs, in which case the focus range has no client rects?
-        //     Not sure why, or in what browsers (only noticed in Chrome 60),
-        //     but let's catch that case and bail out.
-        // TODO(mdr): Instead, we should somehow walk back the range until we
-        //     find an appropriate position for the tooltip. Sounds tricky!
-        if (!focusRect) {
-            Log.log(
-                "[Highlighting] Known bug: Could not determine the focus " +
-                    'position, so did not show an "Add Highlight" tooltip. ' +
-                    "https://app.asana.com/0/329800276300868/413878480039713 " +
-                    "(see also /r/asana-links)",
-            );
-            return null;
-        }
-
-        // Compute the desired position of the tooltip relative to the offset
-        // parent.
-        const {left, top} = offsetParent.getBoundingClientRect();
-        const relativeFocusRect = getRelativeRect(
-            {
-                left: focusRect.left,
-                top: focusRect.top,
-                width: focusRect.width,
-                height: focusRect.height,
-            },
-            {left, top},
-        );
-
-        return relativeFocusRect;
-    }
-
-    render(): null | React.ReactNode {
-        const focusRect = this._getFocusRect();
-        if (!focusRect) {
-            return null;
-        }
-
-        // using div instead of TooltipContent because
-        // TooltipContent wouldn't let me overwrite
-        // user-select and onClick
-        const content: any = (
-            <div
-                className={css(styles.tooltipLabel)}
-                onClick={this.props.onClick}
-            >
-                {this.props.label}
-            </div>
-        );
-
-        const style = {
-            position: "absolute",
-            left: focusRect.left,
-            // offset the spacing WB provides around tooltips
-            top: `calc(${Math.round(focusRect.top)}px + 0.95em)`,
-            height: 0,
-        } as const;
-
-        return (
-            <div
-                style={style}
-                onMouseEnter={this.props.onMouseEnter}
-                onMouseLeave={this.props.onMouseLeave}
-            >
-                <Tooltip content={content} opened={true}>
-                    <div />
-                </Tooltip>
-            </div>
-        );
-    }
-}
-
-const styles = StyleSheet.create({
-    tooltipLabel: {
-        // Unlike most tooltip contents, we don't want this label to be
-        // selectable. Selecting it is not only unhelpful, but dangerous: if
-        // the user accidentally selects the "Add highlight" tooltip text, then
-        // we lose our reference to the _actual_ text they want to highlight,
-        // and the "Add highlight" action fails.
-        userSelect: "none",
-        fontFamily: `"Lato", sans-serif`,
-        padding: `10px ${Spacing.medium_16}px`,
-        cursor: "pointer",
-    },
-});
-
-export default HighlightTooltip;

package/src/components/highlighting/ui/highlighting-ui.tsx

@@ -1,143 +0,0 @@
-/**
- * This component, given a set of DOMHighlights, draws highlight rectangles in
- * the same absolute position as the highlighted content, as computed by the
- * range's `getClientRects` method.
- *
- * TODO(mdr): Many things can affect the correct positioning of highlighting,
- *     and this component does not attempt to anticipate them. If we start
- *     using this highlighting library on content with a more dynamic layout,
- *     we should add a hook to allow the parent to `forceUpdate` the
- *     `HighlightingUI`.
- */
-import * as i18n from "@khanacademy/wonder-blocks-i18n";
-import * as React from "react";
-
-import {rangesOverlap} from "../ranges";
-
-import HighlightSetRenderer from "./highlight-set-renderer";
-import HighlightTooltip from "./highlight-tooltip";
-import SelectionTracker from "./selection-tracker";
-
-import type {TrackedSelection} from "./selection-tracker";
-import type {DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes} from "./types";
-
-type Props = {
-    // A function that builds a DOMHighlight from the given DOMRange, if
-    // possible. If it would not currently be valid to add a highlight over the
-    // given DOMRange, returns null.
-    buildHighlight: (range: DOMRange) => DOMHighlight | null | undefined;
-    // A Node that contains the highlightable content.
-    contentNode: Node;
-    // Whether the highlights are user-editable. If false, highlights are
-    // read-only.
-    editable: boolean;
-    // A set of highlights to render.
-    highlights: DOMHighlightSet;
-    // This component's `offsetParent` element, which is the nearest ancestor
-    // with `position: relative`. This will enable us to choose the correct
-    // CSS coordinates to align highlights and tooltips with the target
-    // content.
-    offsetParent: Element;
-    // A callback indicating that the user would like to add the given
-    // highlight to the current set of highlights.
-    onAddHighlight: (range: DOMHighlight) => unknown;
-    // A callback indicating that the user would like to remove the highlight
-    // with the given key.
-    onRemoveHighlight: (highlightKey: string) => unknown;
-    // The z-indexes to use when rendering tooltips above content, and
-    // highlights below content.
-    zIndexes: ZIndexes;
-};
-
-class HighlightingUI extends React.PureComponent<Props> {
-    _handleAddHighlight(highlightToAdd: DOMHighlight) {
-        this.props.onAddHighlight(highlightToAdd);
-
-        // Deselect the newly-highlighted text, by collapsing the selection
-        // to the end of the range.
-        const selection = document.getSelection();
-        if (selection) {
-            selection.collapseToEnd();
-        }
-    }
-
-    _selectionIsValid(
-        trackedSelection?: TrackedSelection | null,
-    ): trackedSelection is TrackedSelection {
-        if (!trackedSelection) {
-            return false;
-        }
-
-        const {contentNode} = this.props;
-
-        // Create a range over the content node.
-        const contentRange = new Range();
-        contentRange.selectNodeContents(contentNode);
-
-        // Create a range over the focus position.
-        const focusRange = new Range();
-        focusRange.setStart(
-            trackedSelection.focusNode,
-            trackedSelection.focusOffset,
-        );
-        focusRange.collapse(true /* to start */);
-
-        // Determine whether the content range contains the focus, by checking
-        // whether they intersect. Because the focus range is a single point,
-        // intersection is equivalent to being fully contained.
-        const contentContainsFocus = rangesOverlap(contentRange, focusRange);
-
-        // If the content contains the focus, this is a valid selection. Some
-        // parts of the range might go beyond the content, but that's okay; the
-        // corresponding DOMHighlight is already trimmed to only contain valid
-        // words. We're just checking that the tooltip we render will be inside
-        // the content, because rendering a tooltip outside the content would
-        // be weird.
-        const selectionIsValid = contentContainsFocus;
-
-        return selectionIsValid;
-    }
-
-    render(): React.ReactNode {
-        return (
-            <SelectionTracker
-                buildHighlight={this.props.buildHighlight}
-                enabled={this.props.editable}
-            >
-                {(trackedSelection, userIsMouseSelecting) => (
-                    <div>
-                        <HighlightSetRenderer
-                            editable={
-                                /* An existing highlight is editable when the
-                                 * component is in editable mode, and there's no
-                                 * selection in progress. */
-                                this.props.editable &&
-                                !this._selectionIsValid(trackedSelection)
-                            }
-                            highlights={this.props.highlights}
-                            offsetParent={this.props.offsetParent}
-                            onRemoveHighlight={this.props.onRemoveHighlight}
-                            zIndexes={this.props.zIndexes}
-                        />
-                        {this._selectionIsValid(trackedSelection) &&
-                            !userIsMouseSelecting && (
-                                <HighlightTooltip
-                                    label={i18n._("Add highlight")}
-                                    onClick={() =>
-                                        this._handleAddHighlight(
-                                            trackedSelection.proposedHighlight,
-                                        )
-                                    }
-                                    focusNode={trackedSelection.focusNode}
-                                    focusOffset={trackedSelection.focusOffset}
-                                    offsetParent={this.props.offsetParent}
-                                />
-                            )}
-                    </div>
-                )}
-            </SelectionTracker>
-        );
-    }
-}
-
-export default HighlightingUI;