@khanacademy/perseus-editor 35.2.1 → 35.3.0

package/dist/components/a11y-context.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+import type { A11yIssue } from "./issues-panel";
+import type { A11yReport } from "../preview/use-preview-controller";
+export type A11yContextValue = {
+    /** Turns one issue's highlight on or off. */
+    setIssueHighlight: (instanceId: string, highlighted: boolean) => void;
+    /** Whether the preview iframe's axe-core scan is enabled. */
+    a11yScanningEnabled: boolean;
+    /** Enables/disables the preview iframe's axe-core scan. */
+    setA11yScanningEnabled: (enabled: boolean) => void;
+    /** instanceIds to highlight in the preview iframe, unioned across every
+     * active "Show Me" toggle. */
+    highlightInstanceIds: string[];
+    /** Forwards the preview iframe's latest scan report to the owner. */
+    onA11yReport: (report: A11yReport | null) => void;
+    /** The latest scan's issues, for display in `IssuesPanel`. */
+    axeCoreIssues: A11yIssue[];
+};
+/**
+ * Builds an A11yContextValue, defaulting any field a caller doesn't
+ * override to a production-safe no-op/empty value.
+ */
+export declare function createA11yContextValue(overrides?: Partial<A11yContextValue>): A11yContextValue;
+export declare const A11yContext: React.Context<A11yContextValue | null>;

package/dist/components/info-tip/index.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A wrapper around info-tip/info-tip.jsx that can be rendered on the
+ * server without causing a checksum mismatch on the client.
+ * (RCSS generates classnames with a randomSuffix, which ensures that any
+ * two sets of generated classnames will not match.)
+ */
+import * as React from "react";
+import InfoTipBase from "./info-tip-base";
+import type { PropsFor } from "@khanacademy/wonder-blocks-core";
+type Props = PropsFor<typeof InfoTipBase>;
+type State = {
+    didMount: boolean;
+};
+declare class InfoTip extends React.Component<Props, State> {
+    state: State;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}
+export default InfoTip;

package/dist/components/info-tip/info-tip-base.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+type Props = {
+    children: React.ReactNode;
+};
+declare const InfoTipBase: (props: Props) => React.JSX.Element;
+export default InfoTipBase;

package/dist/components/issues-panel.d.ts

@@ -1,20 +1,52 @@
 import * as React from "react";
 export type IssueImpact = "low" | "medium" | "high";
-export type Issue = {
+/**
+ * A problem to show the author, from the editor-side linter or the preview's
+ * axe-core scanner.
+ */
+export interface Issue {
+    /**
+     * The problem identifier (name). This `id` is _not_ guaranteed to be
+     * unique and is often the name of the rule that generated this issue (for
+     * example, this may be the axe-core rule id or a linter rule name). Shown
+     * to the author and used when a fix is offered, so several issues can
+     * share one — nine images missing alt text are nine `image-alt`s.
+     */
     id: string;
+    /**
+     * The unique issue identifier. Distinguishes this issue from every other
+     * issue in the same list. Optional because some issue sources may not have
+     * one naturally; prefer `getIssueKey` over reading it directly.
+     */
+    instanceId?: string;
+    /**
+     * Where this issue came from. Usually unset — used only when the origin
+     * (source) tells you the issue can do something the others can't. See
+     * {@link A11yIssue}.
+     */
+    source?: "a11y";
     description: string;
-    elements?: Element[];
     helpUrl: string;
     help: string;
     impact: IssueImpact;
     message: string;
+}
+/**
+ * An issue the preview's axe-core scanner found, and can therefore highlight —
+ * it always has the `instanceId` the element map is keyed by.
+ */
+export type A11yIssue = Issue & {
+    source: "a11y";
+    instanceId: string;
 };
+/**
+ * A unique identifier for an issue, suitable for use as a React key or a
+ * Record key. Falls back to `id`, which names the rule rather than the
+ * occurrence, for issues that arrive without an `instanceId`.
+ */
+export declare function getIssueKey(issue: Issue): string;
 type IssuesPanelProps = {
     issues?: Issue[];
-    a11yCheck?: {
-        callback: () => void;
-        isChecked: boolean;
-    };
 };
 declare const IssuesPanel: (props: IssuesPanelProps) => React.JSX.Element;
 export default IssuesPanel;

package/dist/components/show-me-issue.d.ts

@@ -1,5 +1,10 @@
 import * as React from "react";
-declare const ShowMe: ({ elements }: {
-    elements?: Element[];
-}) => React.JSX.Element | null;
+type Props = {
+    /**
+     * The issue's highlight handle. Absent when the issue has nothing in the
+     * preview to point at, which is what makes the toggle unavailable.
+     */
+    instanceId?: string;
+};
+declare const ShowMe: ({ instanceId }: Props) => React.JSX.Element;
 export default ShowMe;

package/dist/components/text-list-editor.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+declare class TextListEditor extends React.Component<any, any> {
+    static propTypes: {
+        options: any;
+        layout: any;
+        onChange: any;
+    };
+    static defaultProps: any;
+    state: any;
+    UNSAFE_componentWillReceiveProps(nextProps: any): void;
+    onChange: (arg1: number, arg2: React.ChangeEvent<HTMLInputElement>) => void;
+    onKeyDown: (arg1: number, arg2: React.KeyboardEvent) => void;
+    render(): React.ReactNode;
+}
+export default TextListEditor;

package/dist/components/widget-editor.d.ts

@@ -25,7 +25,7 @@ declare class WidgetEditor extends React.Component<WidgetEditorProps, WidgetEdit
     _handleAlignmentChange: (newAlignment: Alignment) => void;
     getSaveWarnings: () => any;
     serialize: () => {
-        type: "categorizer" | "iframe" | "table" | "video" | "image" | "radio" | "cs-program" | "definition" | "group" | "dropdown" | "explanation" | "expression" | "free-response" | "grapher" | "graded-group-set" | "graded-group" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "number-line" | "numeric-input" | "orderer" | "phet-simulation" | "python-program" | "plotter" | "sorter" | "mock-widget" | "deprecated-standin";
+        type: "image" | "radio" | "categorizer" | "iframe" | "table" | "video" | "definition" | "group" | "cs-program" | "dropdown" | "explanation" | "expression" | "free-response" | "grapher" | "graded-group-set" | "graded-group" | "input-number" | "interaction" | "interactive-graph" | "label-image" | "matcher" | "matrix" | "measurer" | "number-line" | "numeric-input" | "orderer" | "phet-simulation" | "python-program" | "plotter" | "sorter" | "mock-widget" | "deprecated-standin";
         alignment: string | undefined;
         static: boolean | undefined;
         graded: boolean | undefined;

package/dist/editor-page.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import CombinedHintsEditor from "./hint-editor";
 import ItemEditor from "./item-editor";
-import type { Issue } from "./components/issues-panel";
-import type { APIOptions, APIOptionsWithDefaults, DeviceType, ImageUploader, PerseusDependenciesV2 } from "@khanacademy/perseus";
+import type { A11yIssue, Issue } from "./components/issues-panel";
+import type { A11yReport } from "./preview/use-preview-controller";
+import type { APIOptions, DeviceType, ImageUploader, PerseusDependenciesV2 } from "@khanacademy/perseus";
 import type { Hint, PerseusAnswerArea, PerseusItem, PerseusRenderer } from "@khanacademy/perseus-core";
 type OnChangeParams = {
     jsonMode?: boolean;
@@ -66,13 +67,15 @@ type State = {
     highlightLint: boolean;
     widgetsAreOpen: boolean;
     issues: Issue[];
-    axeCoreIssues: Issue[];
-    showAxeCoreIssues: boolean;
+    axeCoreIssues: A11yIssue[];
+    a11yScanningEnabled: boolean;
+    /** instanceIds of the issues with an active "Show Me" highlight. */
+    highlightInstanceIds: string[];
 };
 declare class EditorPage extends React.Component<Props, State> {
-    a11yCheckerTimeoutId: ReturnType<typeof setTimeout> | undefined;
     itemEditor: React.RefObject<ItemEditor>;
     hintsEditor: React.RefObject<CombinedHintsEditor>;
+    deriveDeviceApiOptions: (inputs: import("./util/derive-device-api-options").DeviceApiOptionsInputs) => import("@khanacademy/perseus").APIOptionsWithDefaults;
     static defaultProps: DefaultProps;
     constructor(props: Props);
     componentDidMount(): void;
@@ -82,7 +85,9 @@ declare class EditorPage extends React.Component<Props, State> {
         question?: PerseusRenderer | undefined;
     } | null;
     componentDidUpdate(previousProps: Props, prevState: State, snapshot: any): void;
-    componentWillUnmount(): void;
+    setIssueHighlight: (instanceId: string, highlighted: boolean) => void;
+    handleA11yReport: (report: A11yReport | null) => void;
+    setA11yScanningEnabled: (enabled: boolean) => void;
     /**
      * Updates JSON state when props change from the parent.
      *
@@ -92,7 +97,6 @@ declare class EditorPage extends React.Component<Props, State> {
      */
     syncJsonStateFromProps(): void;
     toggleJsonMode: () => void;
-    getApiOptions(): APIOptionsWithDefaults;
     getSaveWarnings(): any;
     /**
      * Returns the current version of the edited {@link PerseusItem}.
@@ -101,6 +105,7 @@ declare class EditorPage extends React.Component<Props, State> {
      */
     serialize(): PerseusItem;
     handleChange: (toChange: OnChangeParams) => void;
+    handleEditorChange: (newProps: Partial<PerseusRenderer>) => void;
     changeJSON: (newJson: PerseusItem) => void;
     render(): React.ReactNode;
 }