@khanacademy/perseus 2.1.0 → 4.0.0

package/dist/components/highlighting/types.d.ts

@@ -0,0 +1,64 @@
+/**
+ * A range of highlightable content, defined relative to the current DOM.
+ *
+ * This is actually just the built-in DOM type Range, aliased for consistency
+ * with DOMHighlight and SerializedHighlight.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Range
+ *
+ * A DOMRange is inherently coupled to a particular DOM session, and must be
+ * serialized into a SerializedRange before being persisted.
+ */
+export type DOMRange = Range;
+/**
+ * A range of highlightable content, serialized into a DOM-independent format
+ * so that it can be restored in subsequent browser sessions.
+ *
+ * We currently serialize ranges by the index of the first highlighted word and
+ * index of the last highlighted word, each with respect to the full body of
+ * the highlightable content.
+ *
+ * TODO(mdr): Word index serialization is fragile in environments where the
+ *     highlightable content is liable to change. Currently, our only call
+ *     sites is the test prep app, which saves Perseus state against a
+ *     particular *version* of a Perseus item, so it's impossible for the
+ *     content to change - but, if we try to generalize further, we'll need to
+ *     create new types of range serialization that are more robust to change.
+ *     (Maybe some quoted text, and we scan the content for matches?)
+ *
+ *     Note, too, that changes to the definition of "word" are liable to break
+ *     already-persisted word-index ranges, too. If we significantly change the
+ *     definition, we should consider adding a versioning field here - even if
+ *     we don't support *all* historical word implementations, we still might
+ *     want to hide old highlights altogether if our word definition has
+ *     changed sufficiently radically.
+ */
+export type SerializedRange = {
+    type: "word-indexes";
+    firstWordIndex: number;
+    lastWordIndex: number;
+};
+/**
+ * A highlight, defined relative to the current DOM.
+ *
+ * A DOMHighlight, by depending on DOMRange, is inherently coupled to a
+ * particular DOM session, and must be serialized into a SerializedRange before
+ * being persisted.
+ */
+export type DOMHighlight = {
+    firstWordIndex: number;
+    lastWordIndex: number;
+    domRange: DOMRange;
+};
+export type DOMHighlightSet = {
+    [key: string]: DOMHighlight;
+};
+/**
+ * A highlight, serialized into a DOM-independent format so that it can be
+ * restored in subsequent browser sessions.
+ */
+export type SerializedHighlight = {
+    range: SerializedRange;
+};
+export type SerializedHighlightSet = {
+    [key: string]: SerializedHighlight;
+};

package/dist/components/highlighting/types.js.flow

@@ -0,0 +1,70 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+/**
+ * A range of highlightable content, defined relative to the current DOM.
+ *
+ * This is actually just the built-in DOM type Range, aliased for consistency
+ * with DOMHighlight and SerializedHighlight.
+ * https://developer.mozilla.org/en-US/docs/Web/API/Range
+ *
+ * A DOMRange is inherently coupled to a particular DOM session, and must be
+ * serialized into a SerializedRange before being persisted.
+ */
+export type DOMRange = Range;
+/**
+ * A range of highlightable content, serialized into a DOM-independent format
+ * so that it can be restored in subsequent browser sessions.
+ *
+ * We currently serialize ranges by the index of the first highlighted word and
+ * index of the last highlighted word, each with respect to the full body of
+ * the highlightable content.
+ *
+ * TODO(mdr): Word index serialization is fragile in environments where the
+ *     highlightable content is liable to change. Currently, our only call
+ *     sites is the test prep app, which saves Perseus state against a
+ *     particular *version* of a Perseus item, so it's impossible for the
+ *     content to change - but, if we try to generalize further, we'll need to
+ *     create new types of range serialization that are more robust to change.
+ *     (Maybe some quoted text, and we scan the content for matches?)
+ *
+ *     Note, too, that changes to the definition of "word" are liable to break
+ *     already-persisted word-index ranges, too. If we significantly change the
+ *     definition, we should consider adding a versioning field here - even if
+ *     we don't support *all* historical word implementations, we still might
+ *     want to hide old highlights altogether if our word definition has
+ *     changed sufficiently radically.
+ */
+export type SerializedRange = {|
+  type: "word-indexes",
+  firstWordIndex: number,
+  lastWordIndex: number,
+|};
+/**
+ * A highlight, defined relative to the current DOM.
+ *
+ * A DOMHighlight, by depending on DOMRange, is inherently coupled to a
+ * particular DOM session, and must be serialized into a SerializedRange before
+ * being persisted.
+ */
+export type DOMHighlight = {|
+  firstWordIndex: number,
+  lastWordIndex: number,
+  domRange: DOMRange,
+|};
+export type DOMHighlightSet = {
+  [key: string]: DOMHighlight,
+};
+/**
+ * A highlight, serialized into a DOM-independent format so that it can be
+ * restored in subsequent browser sessions.
+ */
+export type SerializedHighlight = {|
+  range: SerializedRange,
+|};
+export type SerializedHighlightSet = {
+  [key: string]: SerializedHighlight,
+};

package/dist/components/highlighting/ui/highlight-renderer.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import type { DOMHighlight, Position, Rect, ZIndexes } from "./types";
+type HighlightRendererProps = {
+    highlight: DOMHighlight;
+    highlightKey: string;
+    offsetParent: Element;
+    zIndexes: ZIndexes;
+};
+type HighlightRendererState = {
+    cachedHighlightRects: ReadonlyArray<Rect>;
+};
+declare class HighlightRenderer extends React.PureComponent<HighlightRendererProps, HighlightRendererState> {
+    state: HighlightRendererState;
+    UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps): void;
+    /**
+     * 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: HighlightRendererProps): ReadonlyArray<Rect>;
+    /**
+     * 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;
+    /**
+     * Return whether the given mouse position (coordinates relative to the
+     * viewport) is hovering over this highlight.
+     */
+    isHovered(mouseClientPosition?: Position | null): boolean;
+    render(): React.ReactNode;
+}
+export default HighlightRenderer;

package/dist/components/highlighting/ui/highlight-renderer.js.flow

@@ -0,0 +1,45 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { DOMHighlight, Position, Rect, ZIndexes } from "./types";
+declare type HighlightRendererProps = {|
+  highlight: DOMHighlight,
+  highlightKey: string,
+  offsetParent: Element,
+  zIndexes: ZIndexes,
+|};
+declare type HighlightRendererState = {|
+  cachedHighlightRects: $ReadOnlyArray<Rect>,
+|};
+declare class HighlightRenderer
+  extends React.PureComponent<HighlightRendererProps, HighlightRendererState>
+{
+  state: HighlightRendererState;
+  UNSAFE_componentWillReceiveProps(nextProps: HighlightRendererProps): void;
+
+  /**
+   * 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: HighlightRendererProps): $ReadOnlyArray<Rect>;
+
+  /**
+   * 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;
+
+  /**
+   * Return whether the given mouse position (coordinates relative to the
+   * viewport) is hovering over this highlight.
+   */
+  isHovered(mouseClientPosition?: Position | null): boolean;
+  render(): React.Node;
+}
+declare export default typeof HighlightRenderer;

package/dist/components/highlighting/ui/highlight-set-renderer.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+import HighlightRenderer from "./highlight-renderer";
+import type { DOMHighlightSet, Position, ZIndexes } from "./types";
+type HighlightSetRendererProps = {
+    editable: boolean;
+    highlights: DOMHighlightSet;
+    offsetParent: Element;
+    onRemoveHighlight: (highlightKey: string) => unknown;
+    zIndexes: ZIndexes;
+};
+type HighlightSetRendererState = {
+    hoveredHighlightKey: string | null | undefined;
+    hoveringTooltipFor: string | null | undefined;
+};
+declare class HighlightSetRenderer extends React.PureComponent<HighlightSetRendererProps, HighlightSetRendererState> {
+    state: HighlightSetRendererState;
+    _highlightRenderers: {
+        [highlightKey: string]: HighlightRenderer;
+    };
+    componentDidMount(): void;
+    UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps): void;
+    componentWillUnmount(): void;
+    /**
+     * 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): void;
+    _handleMouseMove: (e: MouseEvent) => void;
+    _getHoveredHighlightKey(mouseClientPosition: Position): string | null | undefined;
+    _renderTooltip(): null | React.ReactNode;
+    render(): React.ReactNode;
+}
+export default HighlightSetRenderer;

package/dist/components/highlighting/ui/highlight-set-renderer.js.flow

@@ -0,0 +1,44 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import HighlightRenderer from "./highlight-renderer";
+import type { DOMHighlightSet, Position, ZIndexes } from "./types";
+declare type HighlightSetRendererProps = {|
+  editable: boolean,
+  highlights: DOMHighlightSet,
+  offsetParent: Element,
+  onRemoveHighlight: (highlightKey: string) => mixed,
+  zIndexes: ZIndexes,
+|};
+declare type HighlightSetRendererState = {|
+  hoveredHighlightKey: string | null | void,
+  hoveringTooltipFor: string | null | void,
+|};
+declare class HighlightSetRenderer
+  extends
+    React.PureComponent<HighlightSetRendererProps, HighlightSetRendererState>
+{
+  state: HighlightSetRendererState;
+  _highlightRenderers: {
+    [highlightKey: string]: HighlightRenderer,
+  };
+  componentDidMount(): void;
+  UNSAFE_componentWillReceiveProps(nextProps: HighlightSetRendererProps): void;
+  componentWillUnmount(): void;
+
+  /**
+   * 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): void;
+  _handleMouseMove: (e: MouseEvent) => void;
+  _getHoveredHighlightKey(mouseClientPosition: Position): string | null | void;
+  _renderTooltip(): null | React.Node;
+  render(): React.Node;
+}
+declare export default typeof HighlightSetRenderer;

package/dist/components/highlighting/ui/highlight-tooltip.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import type { Rect } from "./types";
+type HighlightTooltipProps = {
+    label: string;
+    onClick: () => unknown;
+    onMouseEnter?: () => unknown;
+    onMouseLeave?: () => unknown;
+    focusNode: Node;
+    focusOffset: number;
+    offsetParent: Element;
+};
+declare class HighlightTooltip extends React.PureComponent<HighlightTooltipProps> {
+    _getFocusRect(): Rect | null | undefined;
+    render(): null | React.ReactNode;
+}
+export default HighlightTooltip;

package/dist/components/highlighting/ui/highlight-tooltip.js.flow

@@ -0,0 +1,24 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { Rect } from "./types";
+declare type HighlightTooltipProps = {|
+  label: string,
+  onClick: () => mixed,
+  onMouseEnter?: () => mixed,
+  onMouseLeave?: () => mixed,
+  focusNode: Node,
+  focusOffset: number,
+  offsetParent: Element,
+|};
+declare class HighlightTooltip
+  extends React.PureComponent<HighlightTooltipProps>
+{
+  _getFocusRect(): Rect | null | void;
+  render(): null | React.Node;
+}
+declare export default typeof HighlightTooltip;

package/dist/components/highlighting/ui/highlighting-ui.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { TrackedSelection } from "./selection-tracker";
+import type { DOMHighlight, DOMHighlightSet, DOMRange, ZIndexes } from "./types";
+type HighlightingUIProps = {
+    buildHighlight: (range: DOMRange) => DOMHighlight | null | undefined;
+    contentNode: Node;
+    editable: boolean;
+    highlights: DOMHighlightSet;
+    offsetParent: Element;
+    onAddHighlight: (range: DOMHighlight) => unknown;
+    onRemoveHighlight: (highlightKey: string) => unknown;
+    zIndexes: ZIndexes;
+};
+declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+    _handleAddHighlight(highlightToAdd: DOMHighlight): void;
+    _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean;
+    render(): React.ReactNode;
+}
+export default HighlightingUI;

package/dist/components/highlighting/ui/highlighting-ui.js.flow

@@ -0,0 +1,30 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { TrackedSelection } from "./selection-tracker";
+import type {
+  DOMHighlight,
+  DOMHighlightSet,
+  DOMRange,
+  ZIndexes,
+} from "./types";
+declare type HighlightingUIProps = {|
+  buildHighlight: (range: DOMRange) => DOMHighlight | null | void,
+  contentNode: Node,
+  editable: boolean,
+  highlights: DOMHighlightSet,
+  offsetParent: Element,
+  onAddHighlight: (range: DOMHighlight) => mixed,
+  onRemoveHighlight: (highlightKey: string) => mixed,
+  zIndexes: ZIndexes,
+|};
+declare class HighlightingUI extends React.PureComponent<HighlightingUIProps> {
+  _handleAddHighlight(highlightToAdd: DOMHighlight): void;
+  _selectionIsValid(trackedSelection?: TrackedSelection | null): boolean;
+  render(): React.Node;
+}
+declare export default typeof HighlightingUI;

package/dist/components/highlighting/ui/selection-tracker.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Tracks the user's current selection, and exposes it to the subtree using the
+ * function-as-children pattern.
+ */
+import * as React from "react";
+import type { DOMHighlight, DOMRange } from "./types";
+export type TrackedSelection = {
+    focusNode: Node;
+    focusOffset: number;
+    proposedHighlight: DOMHighlight;
+};
+type SelectionTrackerProps = {
+    buildHighlight: (domRange: DOMRange) => DOMHighlight | null | undefined;
+    children?: (trackedSelection: TrackedSelection | null | undefined, userIsMouseSelecting: boolean) => React.ReactElement<any>;
+    enabled: boolean;
+};
+type SelectionTrackerState = {
+    mouseState: "down" | "down-and-selecting" | "up";
+    trackedSelection: TrackedSelection | null | undefined;
+};
+declare class SelectionTracker extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState> {
+    state: SelectionTrackerState;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: SelectionTrackerProps): void;
+    componentWillUnmount(): void;
+    _updateListeners(wasListening: boolean, willListen: boolean): void;
+    /**
+     * Get the current selection focus and range, if present and non-collapsed.
+     *
+     * Otherwise, if there is no current selection or it's collapsed, return
+     * null.
+     */
+    _computeFocusAndRange(): {
+        focusNode: Node;
+        focusOffset: number;
+        range: DOMRange;
+    } | null | undefined;
+    /**
+     * Compute and update the TrackedSelection to reflect the document state.
+     */
+    _updateTrackedSelection(): void;
+    _handleSelectionChange: () => void;
+    _handleMouseDown: () => void;
+    _handleMouseUp: () => void;
+    render(): null | React.ReactElement<React.ComponentProps<"div">>;
+}
+export default SelectionTracker;

package/dist/components/highlighting/ui/selection-tracker.js.flow

@@ -0,0 +1,56 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { DOMHighlight, DOMRange } from "./types";
+export type TrackedSelection = {|
+  focusNode: Node,
+  focusOffset: number,
+  proposedHighlight: DOMHighlight,
+|};
+declare type SelectionTrackerProps = {|
+  buildHighlight: (domRange: DOMRange) => DOMHighlight | null | void,
+  children?: (
+    trackedSelection: TrackedSelection | null | void,
+    userIsMouseSelecting: boolean
+  ) => React.Element<any>,
+  enabled: boolean,
+|};
+declare type SelectionTrackerState = {|
+  mouseState: "down" | "down-and-selecting" | "up",
+  trackedSelection: TrackedSelection | null | void,
+|};
+declare class SelectionTracker
+  extends React.PureComponent<SelectionTrackerProps, SelectionTrackerState>
+{
+  state: SelectionTrackerState;
+  componentDidMount(): void;
+  componentDidUpdate(prevProps: SelectionTrackerProps): void;
+  componentWillUnmount(): void;
+  _updateListeners(wasListening: boolean, willListen: boolean): void;
+
+  /**
+   * Get the current selection focus and range, if present and non-collapsed.
+   *
+   * Otherwise, if there is no current selection or it's collapsed, return
+   * null.
+   */
+  _computeFocusAndRange(): {|
+    focusNode: Node,
+    focusOffset: number,
+    range: DOMRange,
+  |} | null | void;
+
+  /**
+   * Compute and update the TrackedSelection to reflect the document state.
+   */
+  _updateTrackedSelection(): void;
+  _handleSelectionChange: () => void;
+  _handleMouseDown: () => void;
+  _handleMouseUp: () => void;
+  render(): null | React.Element<"div">;
+}
+declare export default typeof SelectionTracker;

package/dist/components/highlighting/ui/types.d.ts

@@ -0,0 +1,13 @@
+import type { DOMHighlight, DOMHighlightSet, DOMRange } from "../types";
+export type { DOMHighlight, DOMHighlightSet, DOMRange };
+export type Position = {
+    left: number;
+    top: number;
+};
+export type Rect = Position & {
+    width: number;
+    height: number;
+};
+export type ZIndexes = {
+    belowContent: number;
+};

package/dist/components/highlighting/ui/types.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { DOMHighlight, DOMHighlightSet, DOMRange } from "../types";
+export type { DOMHighlight, DOMHighlightSet, DOMRange };
+export type Position = {|
+  left: number,
+  top: number,
+|};
+export type Rect = {|
+  ...Position,
+  ...{|
+    width: number,
+    height: number,
+  |},
+|};
+export type ZIndexes = {|
+  belowContent: number,
+|};

package/dist/components/highlighting/ui/util.d.ts

@@ -0,0 +1,28 @@
+import type { DOMRange, Position, Rect } from "./types";
+/**
+ * Given two positions relative to the same origin, return `child`'s position
+ * relative to `parent`'s position.
+ */
+export declare function getRelativePosition(child: Position, parent: Position): Position;
+/**
+ * `getRelativePosition`, but for Rects.
+ *
+ * Given a rectangle and a position relative to the same origin, return a new
+ * rectangle of the same size, whose position is relative to the given
+ * position.
+ */
+export declare function getRelativeRect({ left, top, width, height }: Rect, parent: Position): Rect;
+/**
+ * Given a DOMRange, return a list of client-relative rects that cover the text
+ * inside the DOMRange.
+ *
+ * This behaves differently than the browser's built-in `getClientRects` method
+ * for DOMRanges, because this method only gets rects for the *text* nodes,
+ * whereas the browser's method will also return rects for any fully-contained
+ * *element* nodes.
+ *
+ * For example, if an entire paragraph is selected, then `getClientRects` will
+ * return a rectangle that covers the entire paragraph block, whereas this
+ * method will only return rectangles for the text inside the paragraph.
+ */
+export declare function getClientRectsForTextInRange(range: DOMRange): ReadonlyArray<Rect>;

package/dist/components/highlighting/ui/util.js.flow

@@ -0,0 +1,42 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import type { DOMRange, Position, Rect } from "./types";
+
+/**
+ * Given two positions relative to the same origin, return `child`'s position
+ * relative to `parent`'s position.
+ */
+declare export function getRelativePosition(
+  child: Position,
+  parent: Position
+): Position;
+
+/**
+ * `getRelativePosition`, but for Rects.
+ *
+ * Given a rectangle and a position relative to the same origin, return a new
+ * rectangle of the same size, whose position is relative to the given
+ * position.
+ */
+declare export function getRelativeRect(x: Rect, parent: Position): Rect;
+
+/**
+ * Given a DOMRange, return a list of client-relative rects that cover the text
+ * inside the DOMRange.
+ *
+ * This behaves differently than the browser's built-in `getClientRects` method
+ * for DOMRanges, because this method only gets rects for the *text* nodes,
+ * whereas the browser's method will also return rects for any fully-contained
+ * *element* nodes.
+ *
+ * For example, if an entire paragraph is selected, then `getClientRects` will
+ * return a rectangle that covers the entire paragraph block, whereas this
+ * method will only return rectangles for the text inside the paragraph.
+ */
+declare export function getClientRectsForTextInRange(
+  range: DOMRange
+): $ReadOnlyArray<Rect>;

package/dist/components/highlighting/word-indexer.d.ts

@@ -0,0 +1,28 @@
+/**
+ * This component, whenever its content updates, traverses the DOM to find
+ * semantic words and send the corresponding DOMRanges to the caller via a
+ * callback.
+ *
+ * A "word" here is a sequence of non-whitespace text characters, uninterrupted
+ * by the start/end of a non-inline element. That is, a word can span across
+ * text nodes and inline tags like <b>, but cannot span across block
+ * paragraphs.
+ *
+ * The words yielded by WordIndexer are sorted in document order, which makes
+ * them amenable to binary search - see `findBoundaryWordIndex` in ranges.js.
+ */
+import * as React from "react";
+import type { DOMRange } from "./types";
+type WordIndexerProps = {
+    children?: React.ReactElement<any>;
+    onWordsUpdate: (wordRanges: ReadonlyArray<DOMRange>) => unknown;
+};
+declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+    _container: HTMLElement | null | undefined;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    _sendWordsUpdate(): void;
+    _getWordRanges(): ReadonlyArray<DOMRange>;
+    render(): React.ReactNode;
+}
+export default WordIndexer;

package/dist/components/highlighting/word-indexer.js.flow

@@ -0,0 +1,21 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { DOMRange } from "./types";
+declare type WordIndexerProps = {|
+  children?: React.Element<any>,
+  onWordsUpdate: (wordRanges: $ReadOnlyArray<DOMRange>) => mixed,
+|};
+declare class WordIndexer extends React.PureComponent<WordIndexerProps> {
+  _container: HTMLElement | null | void;
+  componentDidMount(): void;
+  componentDidUpdate(): void;
+  _sendWordsUpdate(): void;
+  _getWordRanges(): $ReadOnlyArray<DOMRange>;
+  render(): React.Node;
+}
+declare export default typeof WordIndexer;

package/dist/components/hud.d.ts

@@ -0,0 +1,15 @@
+import PropTypes from "prop-types";
+import * as React from "react";
+declare class HUD extends React.Component<any> {
+    static propTypes: {
+        message: PropTypes.Validator<string>;
+        enabled: PropTypes.Validator<boolean>;
+        onClick: PropTypes.Validator<(...args: any[]) => any>;
+        fixedPosition: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: any;
+    renderVisibleIcon: () => React.ReactElement;
+    renderHiddenIcon: () => React.ReactElement;
+    render(): React.ReactNode;
+}
+export default HUD;