@khanacademy/perseus-editor 31.1.0 → 31.2.0

package/dist/preview/message-types.d.ts

@@ -15,16 +15,6 @@ export declare const PREVIEW_MESSAGE_SOURCE: "perseus-preview";
 interface PreviewMessageBase {
     source: typeof PREVIEW_MESSAGE_SOURCE;
 }
-/**
- * Base type for messages with iframe ID
- *
- * Note: The ID is primarily used for debugging/logging purposes.
- * Message routing is handled by event.source filtering in the hooks,
- * not by comparing ID strings.
- */
-interface PreviewMessageWithId extends PreviewMessageBase {
-    id: string;
-}
 /**
  * Data for question preview (full item with question, answer area, and hints)
  */
@@ -75,36 +65,30 @@ export type PreviewContent = {
 /**
  * Message from parent sending content data to iframe
  */
-type PreviewDataMessage = PreviewMessageWithId & {
+interface PreviewDataMessage extends PreviewMessageBase {
     type: "content-data";
     content: PreviewContent;
-};
+}
 /**
  * Union of all messages sent from parent to iframe
  */
 export type ParentToIframeMessage = PreviewDataMessage;
 /**
- * Message from iframe requesting data from parent
+ * Message from iframe to parent telling it the iframe is ready
  */
-type PreviewDataRequestMessage = PreviewMessageWithId & {
-    type: "request-data";
-};
+interface PreviewIframeReadyMessage extends PreviewMessageBase {
+    type: "iframe-ready";
+}
 /**
  * Message from iframe reporting its content height
  */
-type PreviewHeightUpdateMessage = PreviewMessageWithId & {
+interface PreviewHeightUpdateMessage extends PreviewMessageBase {
     type: "height-update";
     height: number;
-};
-/**
- * Message from iframe reporting lint warnings
- */
-type PreviewLintReportMessage = PreviewMessageWithId & {
-    type: "lint-report";
-    lintWarnings: ReadonlyArray<any>;
-};
+}
 /**
  * Union of all messages sent from iframe to parent
  */
-export type IframeToParentMessage = PreviewDataRequestMessage | PreviewHeightUpdateMessage | PreviewLintReportMessage;
+export type IframeToParentMessage = PreviewIframeReadyMessage | PreviewHeightUpdateMessage;
+export declare function createPreviewIframeReadyMessage(): PreviewIframeReadyMessage;
 export {};

package/dist/preview/use-preview-controller.d.ts

@@ -0,0 +1,43 @@
+import * as React from "react";
+import type { PreviewContent } from "./message-types";
+type UsePreviewControllerResult = {
+    /**
+     * Send preview content data to the iframe
+     */
+    sendData: (data: PreviewContent) => void;
+    /**
+     * Current height of the iframe content (null if not yet reported)
+     */
+    height: number | null;
+};
+/**
+ * Hook for parent/editor to send data to preview iframe and receive updates.
+ *
+ * This hook:
+ * - Sends preview content data to iframe via postMessage
+ * - Listens for height updates from iframe
+ * - Listens for lint reports from iframe
+ * - Automatically sanitizes apiOptions before sending (removes non-serializable functions)
+ *
+ * @param iframeRef - Reference to the iframe element
+ * @returns Object with sendData function and current height
+ *
+ * @example
+ * ```tsx
+ * function Editor() {
+ *   const iframeRef = React.useRef<HTMLIFrameElement>(null);
+ *   const { sendData, height } = usePreviewController(iframeRef);
+ *
+ *   React.useEffect(() => {
+ *     sendData({
+ *       type: "question",
+ *       data: { item, apiOptions, ... }
+ *     });
+ *   }, [item, apiOptions]);
+ *
+ *   return <iframe ref={iframeRef} style={{ height }} />;
+ * }
+ * ```
+ */
+export declare function usePreviewController(iframeRef: React.RefObject<HTMLIFrameElement>): UsePreviewControllerResult;
+export {};

package/dist/preview/use-preview-presenter.d.ts

@@ -0,0 +1,50 @@
+import type { PreviewContent } from "./message-types";
+type UsePreviewPresenterResult = {
+    /**
+     * The preview content data received from the parent, or null if not yet loaded
+     */
+    data: PreviewContent | null;
+    /**
+     * Whether the preview should render in mobile mode (from data-mobile attribute)
+     */
+    isMobile: boolean;
+    /**
+     * Whether to show the lint gutter (from data-lint-gutter attribute)
+     */
+    hasLintGutter: boolean;
+    /**
+     * Function to report the current height of the iframe content to the parent
+     */
+    reportHeight: (height: number) => void;
+};
+/**
+ * Hook for preview iframe to receive data from parent and send updates back.
+ *
+ * This hook:
+ * - Reads iframe configuration from dataset attributes (id, mobile, lintGutter)
+ * - Listens for content data from the parent window via postMessage
+ * - Requests initial data on mount
+ * - Provides functions to report height and lint warnings back to parent
+ *
+ * @example
+ * ```tsx
+ * function PreviewPage() {
+ *   const { data, isMobile, reportHeight } = usePreviewPresenter();
+ *
+ *   React.useEffect(() => {
+ *     if (containerRef.current) {
+ *       reportHeight(containerRef.current.scrollHeight);
+ *     }
+ *   }, [data, reportHeight]);
+ *
+ *   if (!data) return <div>Loading...</div>;
+ *   return <PreviewRenderer
+ *       ref={containerRef}
+ *       data={data}
+ *       isMobile={isMobile}
+ *   />;
+ * }
+ * ```
+ */
+export declare function usePreviewPresenter(): UsePreviewPresenterResult;
+export {};

package/dist/testing/feature-flags-util.d.ts

@@ -4,10 +4,6 @@ declare const DEFAULT_FEATURE_FLAGS: {
     "new-radio-widget": boolean;
     "image-widget-upgrade-gif-controls": boolean;
     "image-widget-upgrade-scale": boolean;
-    "interactive-graph-absolute-value": boolean;
-    "interactive-graph-tangent": boolean;
-    "interactive-graph-logarithm": boolean;
-    "interactive-graph-exponent": boolean;
     "interactive-graph-vector": boolean;
     "interactive-graph-not-scored": boolean;
 };
@@ -21,10 +17,6 @@ export declare function getFeatureFlags(overrides?: Partial<typeof DEFAULT_FEATU
     "new-radio-widget": boolean;
     "image-widget-upgrade-gif-controls": boolean;
     "image-widget-upgrade-scale": boolean;
-    "interactive-graph-absolute-value": boolean;
-    "interactive-graph-tangent": boolean;
-    "interactive-graph-logarithm": boolean;
-    "interactive-graph-exponent": boolean;
     "interactive-graph-vector": boolean;
     "interactive-graph-not-scored": boolean;
 };