@khanacademy/perseus-editor 4.1.5 → 4.1.7

package/src/iframe-content-renderer.tsx

@@ -1,188 +0,0 @@
-/**
- * Displays the given content in an iframe, isolating it from the parent page
- *
- * To simulate the environment of content rendered by itself, content previews
- * are rendered inside iframes, where components such as the math keypad work
- * because the body of the document is not the body of the editor. To make this
- * work, this component renders an iframe and can communicate objects to it
- * through postMessage. The recipient then needs to listen for these messages
- * and pull out the appropriate object stored in the parent's iframeDataStore
- * to get the data to render. When the iframe is loaded, it's javascript calls
- * its requestIframeData function in the parent, which triggers the parent to
- * send the current data.
- */
-import {Log} from "@khanacademy/perseus";
-import * as React from "react";
-
-let nextIframeID = 0;
-const requestIframeData: Record<string, any> = {};
-const updateIframeHeight: Record<string, any> = {};
-// @ts-expect-error - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
-window.iframeDataStore = {};
-
-// This is called once after Perseus is loaded and the iframe
-// is ready to render content, then twice a second afterwards
-// to capture the result of animations.
-window.addEventListener("message", (event) => {
-    if (typeof event.data === "string") {
-        // In Perseus, we expect the callback to exist, as it is added by
-        // `IframeContentRenderer.componentDidMount()`. Unfortunately, this
-        // event listener also gets added in Manticore (since we include Perseus
-        // from there), and Crowdin fires its own "message" events. So we'll
-        // just have to ignore the event when we can't find the callback.
-        const callback = requestIframeData[event.data];
-        if (callback) {
-            callback();
-        }
-    } else if (event.data.id) {
-        if (event.data.height !== undefined) {
-            updateIframeHeight[event.data.id](event.data.height);
-        } else if (event.data.lintWarnings) {
-            // This is a lint report being sent back from the linter.
-            // TODO:
-            // We'll want to display the number of warnings in the HUD.
-            // But for now, we just log it to the console
-            Log.log("LINTER REPORT", {
-                lintWarnings: JSON.stringify(event.data.lintWarnings),
-            });
-        }
-    }
-});
-
-type Props = {
-    // The HTML content to render to the iframe
-    // content?: string,
-
-    // The URL that the iframe should load
-    url: string;
-    // The data-* suffix for passing information to the iframe's JS
-    datasetKey: string;
-    // The value of the data-* attribute
-    datasetValue: any;
-    // Whether to make the iframe's height match its content's height,
-    // used to prevent scrolling inside the iframe.
-    seamless: boolean;
-};
-
-class IframeContentRenderer extends React.Component<Props> {
-    _frame: HTMLIFrameElement | null | undefined;
-    container = React.createRef<HTMLDivElement>();
-
-    // @ts-expect-error - TS2564 - Property '_isMounted' has no initializer and is not definitely assigned in the constructor.
-    _isMounted: boolean;
-    _lastData: any;
-    // @ts-expect-error - TS2564 - Property '_lastHeight' has no initializer and is not definitely assigned in the constructor.
-    _lastHeight: number;
-    // @ts-expect-error - TS2564 - Property 'iframeID' has no initializer and is not definitely assigned in the constructor.
-    iframeID: number;
-
-    componentDidMount() {
-        // TODO(scottgrant): This is a hack to remove the deprecated call to
-        // this.isMounted() but is still considered an anti-pattern.
-        this._isMounted = true;
-
-        this.iframeID = nextIframeID;
-        nextIframeID++;
-
-        this._prepareFrame();
-        requestIframeData[this.iframeID] = () => {
-            this.sendNewData(this._lastData);
-        };
-
-        updateIframeHeight[this.iframeID] = (height: any) => {
-            this._lastHeight = height;
-            if (
-                this._isMounted &&
-                this.props.seamless &&
-                this.container.current
-            ) {
-                this.container.current.style.height = height + "px";
-            }
-        };
-    }
-
-    shouldComponentUpdate(nextProps: Props): boolean {
-        return (
-            nextProps.datasetValue !== this.props.datasetValue ||
-            nextProps.seamless !== this.props.seamless
-        );
-    }
-
-    componentDidUpdate(prevProps: Props) {
-        if (this.container.current) {
-            if (!this.props.seamless) {
-                this.container.current.style.height = "100%";
-            } else {
-                this.container.current.style.height = this._lastHeight + "px";
-            }
-        }
-
-        if (prevProps.datasetValue !== this.props.datasetValue) {
-            // Not just a change in seamless
-            this._prepareFrame();
-        }
-    }
-
-    componentWillUnmount() {
-        requestIframeData[this.iframeID] = null;
-        updateIframeHeight[this.iframeID] = null;
-
-        this._isMounted = false;
-    }
-
-    _prepareFrame() {
-        // Don't initialize the iframe until the page has loaded
-        if (this._frame) {
-            this.container.current?.removeChild(this._frame);
-        }
-
-        const frame = document.createElement("iframe");
-        frame.style.width = "100%";
-        frame.style.height = "100%";
-        frame.src = this.props.url;
-
-        if (this.props.datasetKey) {
-            // If the user has specified a data-* attribute to place on the
-            // iframe, we set it here. Right now, this is used to
-            // communicate if the iframe should be enabling touch emulation.
-            frame.dataset[this.props.datasetKey] = this.props.datasetValue;
-        }
-        frame.dataset.id = String(this.iframeID);
-
-        if (this.props.seamless) {
-            // The seamless prop is the same as the "nochrome" prop that
-            // gets passed to DeviceFramer. If it is set, then we're going
-            // to be displaying editor previews and want to leave some room
-            // for lint indicators in the right margin. We use the dataset
-            // as above to pass this information on to the perseus-frame
-            // component inside the iframe
-            frame.dataset.lintGutter = "true";
-        }
-
-        this.container.current?.appendChild(frame);
-
-        this._frame = frame;
-    }
-
-    sendNewData(data: any) {
-        const frame = this._frame;
-        if (this._isMounted && data && frame?.contentWindow) {
-            this._lastData = data;
-
-            // We can't use JSON.stringify/parse for this because the apiOptions
-            // includes the functions GroupMetadataEditor, groupAnnotator,
-            // onFocusChange, and onInputError.
-            // @ts-expect-error - TS2339 - Property 'iframeDataStore' does not exist on type 'Window & typeof globalThis'.
-            window.iframeDataStore[this.iframeID] = data;
-            frame.contentWindow.postMessage(this.iframeID, "*");
-        }
-    }
-
-    render(): React.ReactNode {
-        return (
-            <div ref={this.container} style={{width: "100%", height: "100%"}} />
-        );
-    }
-}
-
-export default IframeContentRenderer;

package/src/index.ts

@@ -1,30 +0,0 @@
-export {libVersion} from "./version";
-
-export {default as ArticleEditor} from "./article-editor";
-export {default as DeviceFramer} from "./components/device-framer";
-export {default as ViewportResizer} from "./components/viewport-resizer";
-export {default as ArticleDiff} from "./diffs/article-diff";
-export {default as ItemDiff} from "./diffs/item-diff";
-export {default as StructuredItemDiff} from "./diffs/structured-item-diff";
-export {default as EditorPage} from "./editor-page";
-export {default as Editor} from "./editor";
-export {default as i18n} from "./i18n";
-export {default as IframeContentRenderer} from "./iframe-content-renderer";
-export {default as MultiRendererEditor} from "./multirenderer-editor";
-export {default as StatefulArticleEditor} from "./stateful-article-editor";
-export {default as StatefulEditorPage} from "./stateful-editor-page";
-
-import "./styles/perseus-editor.less";
-
-// eslint-disable-next-line import/order
-import {Widgets} from "@khanacademy/perseus";
-import AllEditors from "./all-editors";
-import AllWidgets from "./all-widgets";
-
-Widgets.registerEditors(AllEditors);
-Widgets.registerWidgets(AllWidgets);
-
-Widgets.replaceEditor("transformer", "deprecated-standin");
-Widgets.replaceWidget("transformer", "deprecated-standin");
-
-export {AllEditors, AllWidgets};

package/src/item-editor.tsx

@@ -1,158 +0,0 @@
-import {itemDataVersion} from "@khanacademy/perseus";
-import * as React from "react";
-import _ from "underscore";
-
-import DeviceFramer from "./components/device-framer";
-import Editor from "./editor";
-import IframeContentRenderer from "./iframe-content-renderer";
-import ItemExtrasEditor from "./item-extras-editor";
-
-import type {
-    APIOptions,
-    ImageUploader,
-    ChangeHandler,
-} from "@khanacademy/perseus";
-
-const ITEM_DATA_VERSION = itemDataVersion;
-
-type Props = {
-    apiOptions?: APIOptions;
-    deviceType?: string;
-    gradeMessage?: string;
-    imageUploader?: ImageUploader;
-    wasAnswered?: boolean;
-    question?: any;
-    answerArea?: any;
-    // URL of the route to show on initial load of the preview frames.
-    previewURL: string;
-    onChange: ChangeHandler;
-    // The content ID of the AssessmentItem being edited. It may not be set
-    // for non-content library exercise questions.
-    itemId?: string;
-};
-
-class ItemEditor extends React.Component<Props> {
-    static defaultProps: {
-        answerArea: Record<any, any>;
-        onChange: () => void;
-        question: Record<any, any>;
-    } = {
-        onChange: () => {},
-        question: {},
-        answerArea: {},
-    };
-
-    frame = React.createRef<IframeContentRenderer>();
-    questionEditor = React.createRef<Editor>();
-    itemExtrasEditor = React.createRef<ItemExtrasEditor>();
-
-    // Notify the parent that the question or answer area has been updated.
-    updateProps: ChangeHandler = (newProps, cb, silent) => {
-        const props = _(this.props).pick("question", "answerArea");
-
-        this.props.onChange(_(props).extend(newProps), cb, silent);
-    };
-
-    triggerPreviewUpdate: (newData?: any) => void = (newData: any) => {
-        this.frame.current?.sendNewData(newData);
-    };
-
-    handleEditorChange: ChangeHandler = (newProps, cb, silent) => {
-        const question = _.extend({}, this.props.question, newProps);
-        this.updateProps({question}, cb, silent);
-    };
-
-    handleItemExtrasChange: ChangeHandler = (newProps, cb, silent) => {
-        const answerArea = _.extend({}, this.props.answerArea, newProps);
-        this.updateProps({answerArea}, cb, silent);
-    };
-
-    getSaveWarnings: () => any = () => {
-        return this.questionEditor.current?.getSaveWarnings();
-    };
-
-    serialize: (options?: any) => {
-        answerArea: any;
-        itemDataVersion: {
-            major: number;
-            minor: number;
-        };
-        question: any;
-    } = (options: any) => {
-        return {
-            question: this.questionEditor.current?.serialize(options),
-            answerArea: this.itemExtrasEditor.current?.serialize(),
-            itemDataVersion: ITEM_DATA_VERSION,
-        };
-    };
-
-    render(): React.ReactNode {
-        const isMobile =
-            this.props.deviceType === "phone" ||
-            this.props.deviceType === "tablet";
-        return (
-            <div className="perseus-editor-table">
-                <div className="perseus-editor-row perseus-question-container">
-                    <div className="perseus-editor-left-cell">
-                        <div className="pod-title">Question</div>
-                        <Editor
-                            ref={this.questionEditor}
-                            // Using the AssessmentItem content ID as the key
-                            // ensures that when the user navigates to another
-                            // item in the Sidebar, the question editor is
-                            // re-rendered by React.
-                            key={this.props.itemId}
-                            placeholder="Type your question here..."
-                            className="perseus-question-editor"
-                            imageUploader={this.props.imageUploader}
-                            onChange={this.handleEditorChange}
-                            apiOptions={this.props.apiOptions}
-                            showWordCount={true}
-                            {...this.props.question}
-                        />
-                    </div>
-
-                    <div className="perseus-editor-right-cell">
-                        <div id="problemarea">
-                            <DeviceFramer
-                                deviceType={this.props.deviceType}
-                                nochrome={true}
-                            >
-                                <IframeContentRenderer
-                                    ref={this.frame}
-                                    key={this.props.deviceType}
-                                    datasetKey="mobile"
-                                    datasetValue={isMobile}
-                                    seamless={true}
-                                    url={this.props.previewURL}
-                                />
-                            </DeviceFramer>
-                            <div
-                                id="hintsarea"
-                                className="hintsarea"
-                                style={{display: "none"}}
-                            />
-                        </div>
-                    </div>
-                </div>
-
-                <div className="perseus-editor-row perseus-answer-container">
-                    <div className="perseus-editor-left-cell">
-                        <div className="pod-title">Question extras</div>
-                        <ItemExtrasEditor
-                            ref={this.itemExtrasEditor}
-                            onChange={this.handleItemExtrasChange}
-                            {...this.props.answerArea}
-                        />
-                    </div>
-
-                    <div className="perseus-editor-right-cell">
-                        <div id="answer_area" />
-                    </div>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default ItemEditor;

package/src/item-extras-editor.tsx

@@ -1,230 +0,0 @@
-import {components, ItemExtras} from "@khanacademy/perseus";
-import * as React from "react";
-
-import type {PerseusAnswerArea} from "@khanacademy/perseus";
-
-const {InfoTip} = components;
-
-type Props = PerseusAnswerArea & {
-    onChange: (props: Partial<PerseusAnswerArea>) => void;
-};
-
-type State = {
-    financialCalculatorOptionsExpanded: boolean;
-};
-
-class ItemExtrasEditor extends React.Component<Props, State> {
-    static defaultProps: PerseusAnswerArea = {
-        calculator: false,
-        chi2Table: false,
-        financialCalculatorMonthlyPayment: false,
-        financialCalculatorTotalAmount: false,
-        financialCalculatorTimeToPayOff: false,
-        periodicTable: false,
-        periodicTableWithKey: false,
-        tTable: false,
-        zTable: false,
-    };
-
-    state = {
-        financialCalculatorOptionsExpanded: false,
-    };
-
-    componentDidUpdate(prevProps: Readonly<Props>): void {
-        // If no financial calculator options are checked, uncheck the
-        // financial calculator option.
-        if (
-            this.state.financialCalculatorOptionsExpanded &&
-            !this.props.financialCalculatorMonthlyPayment &&
-            !this.props.financialCalculatorTotalAmount &&
-            !this.props.financialCalculatorTimeToPayOff
-        ) {
-            this.setState({financialCalculatorOptionsExpanded: false});
-        }
-    }
-
-    serialize: () => PerseusAnswerArea = () => {
-        const data = {...ItemExtrasEditor.defaultProps};
-        for (const key of ItemExtras) {
-            data[key] = !!this.props[key];
-        }
-        return data;
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-answer-editor">
-                <div className="perseus-answer-options">
-                    <ItemExtraCheckbox
-                        label="Show calculator:"
-                        infoTip="Use the calculator when completing difficult calculations is NOT the intent of the question. DON’T use the calculator when testing the student’s ability to complete different types of computations."
-                        checked={this.props.calculator}
-                        onChange={(e) => {
-                            this.props.onChange({
-                                calculator: e.target.checked,
-                            });
-                        }}
-                    />
-
-                    <ItemExtraCheckbox
-                        label="Show financial calculator:"
-                        infoTip="This provides the student with the ability to view a financial calculator, e.g., for answering financial questions. Once checked, requires at least one of the three options below to be checked."
-                        checked={this.state.financialCalculatorOptionsExpanded}
-                        onChange={(e) => {
-                            this.setState({
-                                financialCalculatorOptionsExpanded:
-                                    e.target.checked,
-                            });
-                            // If the financial calculator is unchecked,
-                            // this needs to be reset. All checked by
-                            // default.
-                            this.props.onChange({
-                                financialCalculatorMonthlyPayment:
-                                    e.target.checked,
-                                financialCalculatorTotalAmount:
-                                    e.target.checked,
-                                financialCalculatorTimeToPayOff:
-                                    e.target.checked,
-                            });
-                        }}
-                    />
-
-                    {this.state.financialCalculatorOptionsExpanded && (
-                        <>
-                            <ItemExtraCheckbox
-                                label="Include monthly payment:"
-                                infoTip="This provides the student with the ability to view a monthly payment calculator; e.g., given a loan amount, interest rate, and term, what is the monthly payment?"
-                                checked={
-                                    this.props.financialCalculatorMonthlyPayment
-                                }
-                                onChange={(e) => {
-                                    this.props.onChange({
-                                        financialCalculatorMonthlyPayment:
-                                            e.target.checked,
-                                    });
-                                }}
-                                indent
-                            />
-                            <ItemExtraCheckbox
-                                label="Include total amount:"
-                                infoTip="This provides the student with the ability to view a total amount calculator; e.g., given a monthly payment, interest rate, and term, what is the total amount to be paid?"
-                                checked={
-                                    this.props.financialCalculatorTotalAmount
-                                }
-                                onChange={(e) => {
-                                    this.props.onChange({
-                                        financialCalculatorTotalAmount:
-                                            e.target.checked,
-                                    });
-                                }}
-                                indent
-                            />
-                            <ItemExtraCheckbox
-                                label="Include time-to-pay-off:"
-                                infoTip="This provides the student with the ability to view a time to pay off calculator; e.g., given a loan amount, interest rate, and monthly payment, how long will it take to pay off the loan?"
-                                checked={
-                                    this.props.financialCalculatorTimeToPayOff
-                                }
-                                onChange={(e) => {
-                                    this.props.onChange({
-                                        financialCalculatorTimeToPayOff:
-                                            e.target.checked,
-                                    });
-                                }}
-                                indent
-                            />
-                        </>
-                    )}
-
-                    <ItemExtraCheckbox
-                        label="Show periodic table:"
-                        infoTip="This provides the student with the ability to view a periodic table of the elements, e.g., for answering chemistry questions."
-                        checked={this.props.periodicTable}
-                        onChange={(e) => {
-                            this.props.onChange({
-                                periodicTable: e.target.checked,
-                                // If the periodic table is unchecked,
-                                // this needs to be reset. If table is
-                                // checked, it should already be false.
-                                periodicTableWithKey: false,
-                            });
-                        }}
-                    />
-
-                    {this.props.periodicTable && (
-                        <ItemExtraCheckbox
-                            label="Include key/legend with periodic table:"
-                            infoTip="Include a key for HS courses; omit for AP chemistry."
-                            checked={this.props.periodicTableWithKey}
-                            onChange={(e) => {
-                                this.props.onChange({
-                                    periodicTableWithKey: e.target.checked,
-                                });
-                            }}
-                            indent
-                        />
-                    )}
-
-                    <ItemExtraCheckbox
-                        label="Show z table (statistics):"
-                        infoTip="This provides the student with the ability to view a table of critical values for the z distribution, e.g. for answering statistics questions."
-                        checked={this.props.zTable}
-                        onChange={(e) => {
-                            this.props.onChange({
-                                zTable: e.target.checked,
-                            });
-                        }}
-                    />
-
-                    <ItemExtraCheckbox
-                        label="Show t table (statistics):"
-                        infoTip="This provides the student with the ability to view a table of critical values for the Student's t distribution, e.g. for answering statistics questions."
-                        checked={this.props.tTable}
-                        onChange={(e) => {
-                            this.props.onChange({
-                                tTable: e.target.checked,
-                            });
-                        }}
-                    />
-
-                    <ItemExtraCheckbox
-                        label="Show chi-squared table (statistics):"
-                        infoTip="This provides the student with the ability to view a table of critical values for the chi-squared distribution, e.g. for answering statistics questions."
-                        checked={this.props.chi2Table}
-                        onChange={(e) => {
-                            this.props.onChange({
-                                chi2Table: e.target.checked,
-                            });
-                        }}
-                    />
-                </div>
-            </div>
-        );
-    }
-}
-
-const ItemExtraCheckbox = (props: {
-    label: string;
-    infoTip: string;
-    checked: boolean;
-    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    indent?: boolean;
-}) => (
-    <div
-        style={{
-            marginLeft: props.indent ? "10px" : "0px",
-        }}
-    >
-        <label>
-            {props.label}
-            <input
-                type="checkbox"
-                checked={props.checked}
-                onChange={props.onChange}
-            />
-        </label>
-        <InfoTip>{props.infoTip}</InfoTip>
-    </div>
-);
-
-export default ItemExtrasEditor;

package/src/katex-mhchem/index.js

@@ -1,73 +0,0 @@
-/* -*- Mode: Javascript; indent-tabs-mode:nil; js-indent-level: 2 -*- */
-/* vim: set ts=2 et sw=2 tw=80: */
-
-/*************************************************************
- *
- *  KaTeX mhchem.js
- *
- *  This file implements a KaTeX version of mhchem version 3.3.0.
- *  It is adapted from MathJax/extensions/TeX/mhchem.js
- *  It differs from the MathJax version as follows:
- *    1. The interface is changed so that it can be called from KaTeX, not MathJax.
- *    2. \rlap and \llap are replaced with \mathrlap and \mathllap.
- *    3. Four lines of code are edited in order to use \raisebox instead of \raise.
- *    4. The reaction arrow code is simplified. All reaction arrows are rendered
- *       using KaTeX extensible arrows instead of building non-extensible arrows.
- *    5. \tripledash vertical alignment is slightly adjusted.
- *
- *    This code, as other KaTeX code, is released under the MIT license.
- *
- * /*************************************************************
- *
- *  MathJax/extensions/TeX/mhchem.js
- *
- *  Implements the \ce command for handling chemical formulas
- *  from the mhchem LaTeX package.
- *
- *  ---------------------------------------------------------------------
- *
- *  Copyright (c) 2011-2015 The MathJax Consortium
- *  Copyright (c) 2015-2018 Martin Hensel
- *
- *  Licensed under the Apache License, Version 2.0 (the "License");
- *  you may not use this file except in compliance with the License.
- *  You may obtain a copy of the License at
- *
- *      http://www.apache.org/licenses/LICENSE-2.0
- *
- *  Unless required by applicable law or agreed to in writing, software
- *  distributed under the License is distributed on an "AS IS" BASIS,
- *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *  See the License for the specific language governing permissions and
- *  limitations under the License.
- */
-
-//
-// Coding Style
-//   - use '' for identifiers that can by minified/uglified
-//   - use "" for strings that need to stay untouched
-
-// version: "3.3.0" for MathJax and KaTeX
-
-import katex from "katex";
-
-import {chemParse} from "./parser";
-
-// Add \ce, \pu, and \tripledash to the KaTeX macros.
-
-katex.__defineMacro("\\ce", function (context) {
-    return chemParse(context.consumeArgs(1)[0], "ce");
-});
-
-katex.__defineMacro("\\pu", function (context) {
-    return chemParse(context.consumeArgs(1)[0], "pu");
-});
-
-//  Needed for \bond for the ~ forms
-//  Raise by 2.56mu, not 2mu. We're raising a hyphen-minus, U+002D, not
-//  a mathematical minus, U+2212. So we need that extra 0.56.
-katex.__defineMacro(
-    "\\tripledash",
-    "{\\vphantom{-}\\raisebox{2.56mu}{$\\mkern2mu" +
-        "\\tiny\\text{-}\\mkern1mu\\text{-}\\mkern1mu\\text{-}\\mkern2mu$}}",
-);