@khanacademy/perseus-editor 1.1.1 → 2.0.1

package/.babelrc.js

@@ -5,4 +5,4 @@
  *
  * We should remove this when jest is fixed.
  */
-module.exports = require("../../config/build/babel.config.js");
+module.exports = require("../../config/build/babel.config");

package/.eslintrc.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-disable import/no-commonjs */
 const path = require("path");
 

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # @khanacademy/perseus-editor
 
+## 2.0.1
+
+### Patch Changes
+
+-   1f062e98: Bump all package versions since the build settings have been updated
+-   406edf6b: Extract strings to dist/string.js instead of dist/strings.
+-   Updated dependencies [1f062e98]
+-   Updated dependencies [df820619]
+-   Updated dependencies [406edf6b]
+    -   @khanacademy/kas@0.3.1
+    -   @khanacademy/kmath@0.1.1
+    -   @khanacademy/perseus@4.0.1
+
+## 2.0.0
+
+### Major Changes
+
+-   53fd3768: Migrate source code to TypeScript
+
+### Patch Changes
+
+-   Updated dependencies [53fd3768]
+-   Updated dependencies [53fd3768]
+    -   @khanacademy/perseus@4.0.0
+    -   @khanacademy/kas@0.3.0
+    -   @khanacademy/kmath@0.1.0
+
 ## 1.1.1
 
 ### Patch Changes

package/dist/all-editors.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any[];
+export default _default;

package/dist/all-editors.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare var _default: any[];
+declare export default typeof _default;

package/dist/all-widgets.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+declare const _default: readonly Readonly<{
+    name: string;
+    displayName: string;
+    getWidget?: (() => import("react").ComponentType<any>) | undefined;
+    accessible?: boolean | ((props: any) => boolean) | undefined;
+    hidden?: boolean | undefined;
+    version?: import("@khanacademy/perseus").Version | undefined;
+    supportedAlignments?: readonly import("@khanacademy/perseus").Alignment[] | undefined;
+    defaultAlignment?: import("@khanacademy/perseus").Alignment | undefined;
+    getDefaultAlignment?: (() => import("@khanacademy/perseus").Alignment) | undefined;
+    isLintable?: boolean | undefined;
+    transform?: import("../../perseus/src/types").WidgetTransform | undefined;
+    tracking?: import("../../perseus/src/types").Tracking | undefined;
+    staticTransform?: import("../../perseus/src/types").WidgetTransform | undefined;
+    traverseChildWidgets?: any;
+    propUpgrades?: {
+        [key: string]: (arg1: any) => any;
+    } | undefined;
+    widget: import("react").ComponentType<any>;
+}>[];
+export default _default;

package/dist/all-widgets.js.flow

@@ -0,0 +1,34 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as $Flowgen$Import$react from "react";
+import * as $Flowgen$Import$_40_khanacademy_2f_perseus from "@khanacademy/perseus";
+import * as $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_types from "../../perseus/src/types";
+declare var _default: $ReadOnlyArray<
+  $ReadOnly<{|
+    name: string,
+    displayName: string,
+    getWidget?: (() => $Flowgen$Import$react.ComponentType<any>) | void,
+    accessible?: boolean | ((props: any) => boolean) | void,
+    hidden?: boolean | void,
+    version?: $Flowgen$Import$_40_khanacademy_2f_perseus.Version | void,
+    supportedAlignments?: $ReadOnlyArray<$Flowgen$Import$_40_khanacademy_2f_perseus.Alignment> | void,
+    defaultAlignment?: $Flowgen$Import$_40_khanacademy_2f_perseus.Alignment | void,
+    getDefaultAlignment?:
+      | (() => $Flowgen$Import$_40_khanacademy_2f_perseus.Alignment)
+      | void,
+    isLintable?: boolean | void,
+    transform?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_types.WidgetTransform | void,
+    tracking?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_types.Tracking | void,
+    staticTransform?: $Flowgen$Import$_2e__2e__2f__2e__2e__2f_perseus_2f_src_2f_types.WidgetTransform | void,
+    traverseChildWidgets?: any,
+    propUpgrades?: {
+      [key: string]: (arg1: any) => any,
+    } | void,
+    widget: $Flowgen$Import$react.ComponentType<any>,
+  |}>
+>;
+declare export default typeof _default;

package/dist/article-editor.d.ts

@@ -0,0 +1,59 @@
+/**
+ * An article editor. Articles are long-form pieces of content, composed of
+ * multiple (Renderer) sections concatenated together.
+ */
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+import type { APIOptions } from "@khanacademy/perseus";
+type RendererProps = {
+    content?: string;
+    widgets?: any;
+    images?: any;
+};
+type JsonType = RendererProps | ReadonlyArray<RendererProps>;
+type DefaultProps = {
+    contentPaths?: ReadonlyArray<string>;
+    json: JsonType;
+    mode: "diff" | "edit" | "json" | "preview";
+    screen: "phone" | "tablet" | "desktop";
+    sectionImageUploadGenerator: (i: number) => React.ReactElement<React.ComponentProps<"span">>;
+    useNewStyles: boolean;
+};
+type PerseusArticleEditorProps = DefaultProps & {
+    apiOptions?: APIOptions;
+    imageUploader?: (arg1: string, arg2: (arg1: string) => unknown) => unknown;
+    previewURL: string;
+} & Changeable.ChangeableProps;
+type State = {
+    highlightLint: boolean;
+};
+export default class ArticleEditor extends React.Component<PerseusArticleEditorProps, State> {
+    static defaultProps: DefaultProps;
+    state: State;
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    _updatePreviewFrames(): void;
+    _apiOptionsForSection(section: RendererProps, sectionIndex: number): any;
+    _sections(): ReadonlyArray<RendererProps>;
+    _renderEditor(): React.ReactElement<React.ComponentProps<"div">>;
+    _renderAddSection(): React.ReactElement<React.ComponentProps<"div">>;
+    _renderLinterHUD(): React.ReactElement<any>;
+    _renderIframePreview(i: number | string, nochrome: boolean): React.ReactElement<any>;
+    _renderPreviewMode(): React.ReactElement<React.ComponentProps<"div">>;
+    _handleJsonChange: (newJson: JsonType) => void;
+    _handleEditorChange: (i: number, newProps: RendererProps) => void;
+    _handleMoveSectionEarlier(i: number): void;
+    _handleMoveSectionLater(i: number): void;
+    _handleAddSectionAfter(i: number): void;
+    _handleRemoveSection(i: number): void;
+    serialize(): JsonType;
+    /**
+     * Returns an array, with one element be section.
+     * Each element is an array of lint warnings present in that section.
+     *
+     * This function can currently only be called in edit mode.
+     */
+    getSaveWarnings(): ReadonlyArray<RendererProps>;
+    render(): React.ReactNode;
+}
+export {};

package/dist/article-editor.js.flow

@@ -0,0 +1,72 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import { Changeable } from "@khanacademy/perseus";
+import * as React from "react";
+import type { APIOptions } from "@khanacademy/perseus";
+declare type RendererProps = {|
+  content?: string,
+  widgets?: any,
+  images?: any,
+|};
+declare type JsonType = RendererProps | $ReadOnlyArray<RendererProps>;
+declare type DefaultProps = {|
+  contentPaths?: $ReadOnlyArray<string>,
+  json: JsonType,
+  mode: "diff" | "edit" | "json" | "preview",
+  screen: "phone" | "tablet" | "desktop",
+  sectionImageUploadGenerator: (
+    i: number
+  ) => React.Element<"span">,
+  useNewStyles: boolean,
+|};
+declare type PerseusArticleEditorProps = {|
+  ...DefaultProps,
+  ...{|
+    apiOptions?: APIOptions,
+    imageUploader?: (arg1: string, arg2: (arg1: string) => mixed) => mixed,
+    previewURL: string,
+  |},
+  ...Changeable.ChangeableProps,
+|};
+declare type State = {|
+  highlightLint: boolean,
+|};
+declare export default class ArticleEditor
+  extends React.Component<PerseusArticleEditorProps, State>
+{
+  static defaultProps: DefaultProps;
+  state: State;
+  componentDidMount(): void;
+  componentDidUpdate(): void;
+  _updatePreviewFrames(): void;
+  _apiOptionsForSection(section: RendererProps, sectionIndex: number): any;
+  _sections(): $ReadOnlyArray<RendererProps>;
+  _renderEditor(): React.Element<"div">;
+  _renderAddSection(): React.Element<"div">;
+  _renderLinterHUD(): React.Element<any>;
+  _renderIframePreview(
+    i: number | string,
+    nochrome: boolean
+  ): React.Element<any>;
+  _renderPreviewMode(): React.Element<"div">;
+  _handleJsonChange: (newJson: JsonType) => void;
+  _handleEditorChange: (i: number, newProps: RendererProps) => void;
+  _handleMoveSectionEarlier(i: number): void;
+  _handleMoveSectionLater(i: number): void;
+  _handleAddSectionAfter(i: number): void;
+  _handleRemoveSection(i: number): void;
+  serialize(): JsonType;
+
+  /**
+   * Returns an array, with one element be section.
+   * Each element is an array of lint warnings present in that section.
+   *
+   * This function can currently only be called in edit mode.
+   */
+  getSaveWarnings(): $ReadOnlyArray<RendererProps>;
+  render(): React.Node;
+}

package/dist/components/blur-input.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import type { CSSProperties } from "aphrodite";
+type Props = {
+    value: string;
+    onChange: (arg1: string) => void;
+    className?: string;
+    style?: CSSProperties;
+};
+type State = {
+    value: string;
+};
+declare class BlurInput extends React.Component<Props, State> {
+    constructor(props: Props);
+    UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+    handleChange: (e: any) => void;
+    handleBlur: (e: any) => void;
+    render(): React.ReactNode;
+}
+export default BlurInput;

package/dist/components/blur-input.js.flow

@@ -0,0 +1,25 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+import type { CSSProperties } from "aphrodite";
+declare type Props = {|
+  value: string,
+  onChange: (arg1: string) => void,
+  className?: string,
+  style?: CSSProperties,
+|};
+declare type State = {|
+  value: string,
+|};
+declare class BlurInput extends React.Component<Props, State> {
+  constructor(props: Props): this;
+  UNSAFE_componentWillReceiveProps(nextProps: Props): void;
+  handleChange: (e: any) => void;
+  handleBlur: (e: any) => void;
+  render(): React.Node;
+}
+declare export default typeof BlurInput;

package/dist/components/checkbox.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export type CheckboxProps = {
+    checked: boolean;
+    disabled?: boolean;
+    appearDisabled?: boolean;
+    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    tabIndex?: number | string;
+    style?: {
+        marginTop: number;
+    };
+    dataTestId?: string;
+    id?: string;
+};
+export default class Checkbox extends React.Component<CheckboxProps> {
+    static defaultProps: {
+        checked: boolean;
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+    render(): React.ReactNode;
+}

package/dist/components/checkbox.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+export type CheckboxProps = {|
+  checked: boolean,
+  disabled?: boolean,
+  appearDisabled?: boolean,
+  onChange: (event: SyntheticInputEvent<HTMLInputElement>) => void,
+  tabIndex?: number | string,
+  style?: {|
+    marginTop: number,
+  |},
+  dataTestId?: string,
+  id?: string,
+|};
+declare export default class Checkbox extends React.Component<CheckboxProps> {
+  static defaultProps: {|
+    checked: boolean,
+    onChange: (event: SyntheticInputEvent<HTMLInputElement>) => void,
+  |};
+  render(): React.Node;
+}

package/dist/components/device-framer.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A component that displays its contents inside a device frame.
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+type Props = any;
+declare class DeviceFramer extends React.Component<Props> {
+    static propTypes: {
+        children: PropTypes.Validator<PropTypes.ReactElementLike>;
+        deviceType: PropTypes.Validator<NonNullable<"phone" | "tablet" | "desktop">>;
+        nochrome: PropTypes.Requireable<boolean>;
+    };
+    render(): React.ReactNode;
+}
+export default DeviceFramer;

package/dist/components/device-framer.js.flow

@@ -0,0 +1,20 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import PropTypes from "prop-types";
+import * as React from "react";
+declare type Props = any;
+declare class DeviceFramer extends React.Component<Props> {
+  static propTypes: {|
+    children: PropTypes.Validator<PropTypes.ReactElementLike>,
+    deviceType: PropTypes.Validator<
+      $NonMaybeType<"phone" | "tablet" | "desktop">
+    >,
+    nochrome: PropTypes.Requireable<boolean>,
+  |};
+  render(): React.Node;
+}
+declare export default typeof DeviceFramer;

package/dist/components/drag-target.d.ts

@@ -0,0 +1,2 @@
+declare const DragTarget: any;
+export default DragTarget;

package/dist/components/drag-target.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare var DragTarget: any;
+declare export default typeof DragTarget;

package/dist/components/dropdown-option.d.ts

@@ -0,0 +1,35 @@
+import * as React from "react";
+export type OptionRenderer = (children: React.ReactElement<any> | null | undefined, value: string, selected: boolean, disabled?: boolean) => React.ReactElement<any>;
+type OptionProps = {
+    value: string;
+    children?: React.ReactNode;
+    selected?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    optionRenderer?: OptionRenderer;
+    onDropdownClose?: () => void;
+    hideFocusState?: boolean;
+    testId?: string;
+    ariaLabel?: string;
+};
+export declare const optionHeight = 30;
+declare class Option extends React.Component<OptionProps> {
+    node: HTMLDivElement;
+    handleKeyDown(event: any): void;
+    render(): React.ReactNode;
+}
+declare class OptionGroup extends React.Component<{
+    onSelected: (value: string) => void;
+    children?: Array<React.ReactElement<React.ComponentProps<typeof Option>>>;
+    selectedValues: Array<string>;
+    optionRenderer?: OptionRenderer;
+    noMargin?: boolean;
+    onDropdownClose?: () => void;
+    hideFocusState?: boolean;
+}> {
+    focusedElement: Element;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}
+export { OptionGroup };
+export default Option;

package/dist/components/dropdown-option.js.flow

@@ -0,0 +1,49 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import * as React from "react";
+export type OptionRenderer = (
+  children: React.Element<any> | null | void,
+  value: string,
+  selected: boolean,
+  disabled?: boolean
+) => React.Element<any>;
+declare type OptionProps = {|
+  value: string,
+  children?: React.Node,
+  selected?: boolean,
+  disabled?: boolean,
+  onClick?: () => void,
+  optionRenderer?: OptionRenderer,
+  onDropdownClose?: () => void,
+  hideFocusState?: boolean,
+  testId?: string,
+  ariaLabel?: string,
+|};
+declare export var optionHeight: 30;
+declare class Option extends React.Component<OptionProps> {
+  node: HTMLDivElement;
+  handleKeyDown(event: any): void;
+  render(): React.Node;
+}
+declare class OptionGroup
+  extends
+    React.Component<{|
+      onSelected: (value: string) => void,
+      children?: Array<React.Element<typeof Option>>,
+      selectedValues: Array<string>,
+      optionRenderer?: OptionRenderer,
+      noMargin?: boolean,
+      onDropdownClose?: () => void,
+      hideFocusState?: boolean,
+    |}>
+{
+  focusedElement: Element;
+  componentDidMount(): void;
+  render(): React.Node;
+}
+declare export { OptionGroup };
+declare export default typeof Option;

package/dist/components/form-wrapped-text-field.d.ts

@@ -0,0 +1,48 @@
+/**
+ * DEPRECATED: Use <TextField> from ./text-field.jsx instead.
+ *
+ * This component wraps an <input> in a <form> to make it easier to add an
+ * `onSubmit` handler.  In practice though this can complicate things because
+ * each field is in it's own form which is not how forms should be structured.
+ * If you need to handle `onSubmit`, please use <TextField> directly with your
+ * own <form> that wraps all text fields in the form.
+ **/
+import { components } from "@khanacademy/perseus";
+import * as React from "react";
+type Props = {
+    id?: string;
+    testId?: string;
+    type?: string;
+    name?: string;
+    readOnly?: boolean;
+    value?: string | ReadonlyArray<string> | number | undefined;
+    placeholder?: string;
+    defaultValue?: string | number | ReadonlyArray<string> | undefined;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    maxLength?: number;
+    invalid?: "true" | "false";
+    style?: React.CSSProperties | undefined;
+    className?: string;
+    width?: number | string;
+    grow?: boolean | number;
+    shrink?: boolean | number;
+    labelMediumInputText?: boolean;
+    icon?: React.ReactElement<React.ComponentProps<typeof components.Icon>>;
+    leftSideIcon?: boolean;
+    backgroundColor?: string;
+    focusBorderColor?: string;
+    borderColor?: string;
+    color?: string;
+    onSubmit?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onBlur?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onFocus?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onChange?: (arg1: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onClick?: (arg1: React.MouseEvent<HTMLInputElement>) => unknown;
+    onKeyPress?: (arg1: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    onKeyDown?: (arg1: React.KeyboardEvent<HTMLInputElement>) => unknown;
+    ["aria-label"]?: string;
+    ["aria-describedby"]?: string | undefined;
+};
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLInputElement>>;
+export default _default;

package/dist/components/form-wrapped-text-field.js.flow

@@ -0,0 +1,48 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+import { components } from "@khanacademy/perseus";
+import * as React from "react";
+declare type Props = {|
+  id?: string,
+  testId?: string,
+  type?: string,
+  name?: string,
+  readOnly?: boolean,
+  value?: string | $ReadOnlyArray<string> | number | void,
+  placeholder?: string,
+  defaultValue?: string | number | $ReadOnlyArray<string> | void,
+  disabled?: boolean,
+  autoFocus?: boolean,
+  maxLength?: number,
+  invalid?: "true" | "false",
+  style?: React.CSSProperties | void,
+  className?: string,
+  width?: number | string,
+  grow?: boolean | number,
+  shrink?: boolean | number,
+  labelMediumInputText?: boolean,
+  icon?: React.Element<typeof components.Icon>,
+  leftSideIcon?: boolean,
+  backgroundColor?: string,
+  focusBorderColor?: string,
+  borderColor?: string,
+  color?: string,
+  onSubmit?: (arg1: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onBlur?: (arg1: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onFocus?: (arg1: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onChange?: (arg1: SyntheticInputEvent<HTMLInputElement>) => mixed,
+  onClick?: (arg1: SyntheticMouseEvent<HTMLInputElement>) => mixed,
+  onKeyPress?: (arg1: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  onKeyDown?: (arg1: SyntheticKeyboardEvent<HTMLInputElement>) => mixed,
+  "aria-label": string | void,
+  "aria-describedby": (string | void) | void,
+|};
+declare var _default: React.ForwardRefExoticComponent<{|
+  ...Props,
+  ...React.RefAttributes<HTMLInputElement>,
+|}>;
+declare export default typeof _default;

package/dist/components/graph-settings.d.ts

@@ -0,0 +1,2 @@
+declare const GraphSettings: any;
+export default GraphSettings;

package/dist/components/graph-settings.js.flow

@@ -0,0 +1,8 @@
+/**
+ * Flowtype definitions for data
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+declare var GraphSettings: any;
+declare export default typeof GraphSettings;