@khanacademy/perseus-editor 4.1.4 → 4.1.6

package/src/widgets/orderer-editor.tsx

@@ -1,172 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-/* eslint-disable one-var, react/forbid-prop-types, react/sort-comp */
-import {components} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-const {InfoTip, TextListEditor} = components;
-
-const NORMAL = "normal",
-    AUTO = "auto",
-    HORIZONTAL = "horizontal",
-    VERTICAL = "vertical";
-
-type Props = any;
-
-class OrdererEditor extends React.Component<Props> {
-    static propTypes = {
-        correctOptions: PropTypes.array,
-        otherOptions: PropTypes.array,
-        height: PropTypes.oneOf([NORMAL, AUTO]),
-        layout: PropTypes.oneOf([HORIZONTAL, VERTICAL]),
-        onChange: PropTypes.func.isRequired,
-    };
-
-    static widgetName = "orderer" as const;
-
-    static defaultProps: Props = {
-        correctOptions: [{content: "$x$"}],
-        otherOptions: [{content: "$y$"}],
-        height: NORMAL,
-        layout: HORIZONTAL,
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div className="perseus-widget-orderer">
-                <div>
-                    {" "}
-                    Correct answer:{" "}
-                    <InfoTip>
-                        <p>
-                            Place the cards in the correct order. The same card
-                            can be used more than once in the answer but will
-                            only be displayed once at the top of a stack of
-                            identical cards.
-                        </p>
-                    </InfoTip>
-                </div>
-                <TextListEditor
-                    options={_.pluck(this.props.correctOptions, "content")}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this.onOptionsChange.bind(this, "correctOptions")}
-                    layout={this.props.layout}
-                />
-
-                <div>
-                    {" "}
-                    Other cards:{" "}
-                    <InfoTip>
-                        <p>Create cards that are not part of the answer.</p>
-                    </InfoTip>
-                </div>
-                <TextListEditor
-                    options={_.pluck(this.props.otherOptions, "content")}
-                    // eslint-disable-next-line react/jsx-no-bind
-                    onChange={this.onOptionsChange.bind(this, "otherOptions")}
-                    layout={this.props.layout}
-                />
-
-                <div>
-                    <label>
-                        {" "}
-                        Layout:{" "}
-                        <select
-                            value={this.props.layout}
-                            // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-                            onChange={this.onLayoutChange}
-                        >
-                            <option value={HORIZONTAL}>Horizontal</option>
-                            <option value={VERTICAL}>Vertical</option>
-                        </select>
-                    </label>
-                    <InfoTip>
-                        <p>
-                            Use the horizontal layout for short text and small
-                            images. The vertical layout is best for longer text
-                            (e.g. proofs).
-                        </p>
-                    </InfoTip>
-                </div>
-                <div>
-                    <label>
-                        {" "}
-                        Height:{" "}
-                        <select
-                            value={this.props.height}
-                            // @ts-expect-error - TS2322 - Type '(arg1: ChangeEvent<HTMLInputElement>) => void' is not assignable to type 'ChangeEventHandler<HTMLSelectElement>'.
-                            onChange={this.onHeightChange}
-                        >
-                            <option value={NORMAL}>Normal</option>
-                            <option value={AUTO}>Automatic</option>
-                        </select>
-                    </label>
-                    <InfoTip>
-                        <p>Use "Normal" for text, "Automatic" for images.</p>
-                    </InfoTip>
-                </div>
-            </div>
-        );
-    }
-
-    onOptionsChange: (
-        arg1: "correctOptions" | "otherOptions",
-        arg2: any,
-        arg3: any,
-    ) => any = (whichOptions, options, cb) => {
-        const props: Record<string, any> = {};
-        props[whichOptions] = _.map(options, function (option) {
-            return {content: option};
-        });
-        this.props.onChange(props, cb);
-    };
-
-    onLayoutChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        this.props.onChange({layout: e.target.value});
-    };
-
-    onHeightChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        this.props.onChange({height: e.target.value});
-    };
-
-    serialize: () => any = () => {
-        // We combine the correct answer and the other cards by merging them,
-        // removing duplicates and empty cards, and sorting them into
-        // categories based on their content
-        const options = _.chain(_.pluck(this.props.correctOptions, "content"))
-            .union(_.pluck(this.props.otherOptions, "content"))
-            .uniq()
-            .reject(function (content) {
-                return content === "";
-            })
-            .sort()
-            .sortBy(function (content) {
-                if (/\d/.test(content)) {
-                    return 0;
-                }
-                if (/^\$?[a-zA-Z]+\$?$/.test(content)) {
-                    return 2;
-                }
-                return 1;
-            })
-            .map(function (content) {
-                return {content: content};
-            })
-            .value();
-
-        return {
-            options: options,
-            correctOptions: this.props.correctOptions,
-            otherOptions: this.props.otherOptions,
-            height: this.props.height,
-            layout: this.props.layout,
-        };
-    };
-}
-
-export default OrdererEditor;

package/src/widgets/passage-editor.tsx

@@ -1,117 +0,0 @@
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-import Editor from "../editor";
-
-const {InfoTip, PropCheckBox} = components;
-
-type Props = any;
-
-class PassageEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        passageTitle: PropTypes.string,
-        passageText: PropTypes.string,
-        footnotes: PropTypes.string,
-        showLineNumbers: PropTypes.bool,
-    };
-
-    static widgetName = "passage" as const;
-
-    static defaultProps: Props = {
-        passageTitle: "",
-        passageText: "",
-        footnotes: "",
-        showLineNumbers: true,
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        const passageEditor = (
-            <Editor
-                // eslint-disable-next-line react/no-string-refs
-                ref="passage-editor"
-                apiOptions={this.props.apiOptions}
-                content={this.props.passageText}
-                widgetEnabled={false}
-                placeholder="Type passage here..."
-                onChange={(newProps) => {
-                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                    this.change({passageText: newProps.content});
-                }}
-                showWordCount={true}
-            />
-        );
-        const footnotesEditor = (
-            <Editor
-                // eslint-disable-next-line react/no-string-refs
-                ref="passage-footnotes-editor"
-                apiOptions={this.props.apiOptions}
-                content={this.props.footnotes}
-                widgetEnabled={false}
-                placeholder="Type footnotes here..."
-                onChange={(newProps) => {
-                    // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                    this.change({footnotes: newProps.content});
-                }}
-            />
-        );
-        return (
-            <div className="perseus-widget-passage-editor">
-                <div className="perseus-widget-row">
-                    <PropCheckBox
-                        label="Show line numbers"
-                        labelAlignment="right"
-                        showLineNumbers={this.props.showLineNumbers}
-                        onChange={this.props.onChange}
-                    />
-                </div>
-                <div>
-                    Passage title:
-                    <InfoTip>
-                        <p>
-                            An optional title that will appear directly above
-                            the passage in the same font style. (E.g. Passage 1)
-                        </p>
-                    </InfoTip>
-                    <div>
-                        <input
-                            type="text"
-                            defaultValue={this.props.passageTitle}
-                            onChange={(e) => {
-                                // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                                this.change({passageTitle: e.target.value});
-                            }}
-                        />
-                    </div>
-                </div>
-                <div>
-                    Passage Text:
-                    {passageEditor}
-                </div>
-                <div>
-                    Footnotes:
-                    <InfoTip>
-                        <p>
-                            To add footnotes, add ^ characters where they belong
-                            in the passage. Then, add ^ in the footnotes area to
-                            reference the footnotes in the passage.
-                        </p>
-                    </InfoTip>
-                    {footnotesEditor}
-                </div>
-            </div>
-        );
-    }
-}
-
-export default PassageEditor;

package/src/widgets/passage-ref-editor.tsx

@@ -1,80 +0,0 @@
-/* eslint-disable @khanacademy/ts-no-error-suppressions */
-import {components, Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-
-const {InfoTip, NumberInput, TextInput} = components;
-
-type Props = any;
-
-class PassageRefEditor extends React.Component<Props> {
-    static propTypes: Props = {
-        ...Changeable.propTypes,
-        passageNumber: PropTypes.number,
-        referenceNumber: PropTypes.number,
-        summaryText: PropTypes.string,
-    };
-
-    static widgetName = "passage-ref" as const;
-
-    static defaultProps: Props = {
-        passageNumber: 1,
-        referenceNumber: 1,
-        summaryText: "",
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                <div>
-                    <label>
-                        {"Passage Number: "}
-                        <NumberInput
-                            value={this.props.passageNumber}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("passageNumber")}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        {"Reference Number: "}
-                        <NumberInput
-                            value={this.props.referenceNumber}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("referenceNumber")}
-                        />
-                    </label>
-                </div>
-                <div>
-                    <label>
-                        {"Summary Text: "}
-                        <TextInput
-                            value={this.props.summaryText}
-                            // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-                            onChange={this.change("summaryText")}
-                        />
-                        <InfoTip>
-                            <p>
-                                Short summary of the referenced section. This
-                                will be included in parentheses and quotes
-                                automatically.
-                            </p>
-                            <p>Ex: The start ... the end</p>
-                        </InfoTip>
-                    </label>
-                </div>
-            </div>
-        );
-    }
-}
-
-export default PassageRefEditor;

package/src/widgets/passage-ref-target-editor.tsx

@@ -1,49 +0,0 @@
-import {Changeable, EditorJsonify} from "@khanacademy/perseus";
-import PropTypes from "prop-types";
-import * as React from "react";
-import _ from "underscore";
-
-type Props = any;
-
-class PassageRefTargetEditor extends React.Component<Props> {
-    static propTypes = {
-        ...Changeable.propTypes,
-        content: PropTypes.string,
-    };
-
-    static widgetName = "passage-ref-target" as const;
-
-    static defaultProps: Props = {
-        content: "",
-    };
-
-    change: (arg1: any, arg2: any, arg3: any) => any = (...args) => {
-        return Changeable.change.apply(this, args);
-    };
-
-    handleContentChange: (arg1: React.ChangeEvent<HTMLInputElement>) => void = (
-        e,
-    ) => {
-        // @ts-expect-error - TS2554 - Expected 3 arguments, but got 1.
-        this.change({content: e.target.value});
-    };
-
-    serialize: () => any = () => {
-        return EditorJsonify.serialize.call(this);
-    };
-
-    render(): React.ReactNode {
-        return (
-            <div>
-                Content:
-                <input
-                    type="text"
-                    value={this.props.content}
-                    onChange={this.handleContentChange}
-                />
-            </div>
-        );
-    }
-}
-
-export default PassageRefTargetEditor;