-
Notifications
You must be signed in to change notification settings - Fork 350
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into catjohnson/expression-resize
- Loading branch information
Showing
16 changed files
with
352 additions
and
99 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@khanacademy/perseus-editor": minor | ||
| --- | ||
|
|
||
| Remove 'strings' prop from ContentPreview (we'll pull it from context) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@khanacademy/perseus": patch | ||
| "@khanacademy/perseus-editor": patch | ||
| --- | ||
|
|
||
| Update dependency on wonder-blocks-form |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| --- | ||
| "@khanacademy/perseus-editor": patch | ||
| --- | ||
|
|
||
| Ensure 'React' is imported in ContentPreview component. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
103 changes: 103 additions & 0 deletions
103
packages/perseus-editor/src/__stories__/content-preview.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,103 @@ | ||
| import { | ||
| PerseusI18nContextProvider, | ||
| type DeviceType, | ||
| } from "@khanacademy/perseus"; | ||
| import {View} from "@khanacademy/wonder-blocks-core"; | ||
| import {spacing} from "@khanacademy/wonder-blocks-tokens"; | ||
| import {useState} from "react"; | ||
|
|
||
| import {articleWithImages} from "../../../perseus/src/__testdata__/article-renderer.testdata"; | ||
| import {mockStrings} from "../../../perseus/src/strings"; | ||
| import {question} from "../../../perseus/src/widgets/__testdata__/radio.testdata"; | ||
| import DeviceFramer from "../components/device-framer"; | ||
| import ViewportResizer from "../components/viewport-resizer"; | ||
| import ContentPreview from "../content-preview"; | ||
|
|
||
| import type {Meta, StoryObj} from "@storybook/react"; | ||
|
|
||
| import "../styles/perseus-editor.less"; | ||
|
|
||
| const PreviewWrapper = (props) => { | ||
| const [previewDevice, setPreviewDevice] = useState<DeviceType>("phone"); | ||
|
|
||
| return ( | ||
| <View> | ||
| <ViewportResizer | ||
| deviceType={previewDevice} | ||
| onViewportSizeChanged={setPreviewDevice} | ||
| /> | ||
| <DeviceFramer nochrome={false} deviceType={previewDevice}> | ||
| <ContentPreview {...props} /> | ||
| </DeviceFramer> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| const meta: Meta<typeof ContentPreview> = { | ||
| title: "PerseusEditor/Content Preview", | ||
| component: ContentPreview, | ||
| decorators: [ | ||
| (Story) => ( | ||
| <View style={{margin: spacing.xxSmall_6}}> | ||
| <PerseusI18nContextProvider strings={mockStrings} locale="en"> | ||
| <Story /> | ||
| </PerseusI18nContextProvider> | ||
| </View> | ||
| ), | ||
| ], | ||
| render: (props) => <PreviewWrapper {...props} />, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof ContentPreview>; | ||
|
|
||
| export const Exercise: Story = { | ||
| args: { | ||
| question, | ||
| }, | ||
| }; | ||
|
|
||
| export const Article: Story = { | ||
| args: { | ||
| question: articleWithImages, | ||
| }, | ||
| }; | ||
|
|
||
| export const WithLintErrors: Story = { | ||
| args: { | ||
| linterContext: { | ||
| contentType: "exercise", | ||
| highlightLint: true, | ||
| stack: [], | ||
| paths: [], | ||
| }, | ||
| question: { | ||
| content: `# H1s bad | ||
| Here is some unclosed math: $1+1=3 | ||
| We should use \`\\dfrac{}\` instead of \`\\frac{}\`: $\\frac{3}{5}$ | ||
| What is the best color in the world? | ||
| [[☃ radio 1]]`, | ||
| widgets: { | ||
| "radio 1": { | ||
| type: "radio", | ||
| options: { | ||
| choices: [ | ||
| {content: "Red"}, | ||
| {content: "# Green"}, | ||
| {content: "Blue", correct: true}, | ||
| { | ||
| content: "None of these!", | ||
| isNoneOfTheAbove: true, | ||
| }, | ||
| ], | ||
| }, | ||
| }, | ||
| }, | ||
| images: {}, | ||
| }, | ||
| }, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { | ||
| KeypadContext, | ||
| StatefulKeypadContextProvider, | ||
| } from "@khanacademy/keypad-context"; | ||
| import {MobileKeypad} from "@khanacademy/math-input"; | ||
| import { | ||
| Renderer, | ||
| constants, | ||
| usePerseusI18n, | ||
| type APIOptions, | ||
| type DeviceType, | ||
| type PerseusRenderer, | ||
| } from "@khanacademy/perseus"; | ||
| import {View} from "@khanacademy/wonder-blocks-core"; | ||
| import {spacing} from "@khanacademy/wonder-blocks-tokens"; | ||
| import {StyleSheet} from "aphrodite"; | ||
| import * as React from "react"; | ||
|
|
||
| import type {LinterContextProps} from "@khanacademy/perseus-linter"; | ||
|
|
||
| /** | ||
| * The `ContentPreview` component provides a simple preview system for Perseus | ||
| * Content. Due to how Persus styles are built, the preview styling matches the | ||
| * current device based on the viewport width (using `@media` queries for | ||
| * `min-width` and `max-width`). | ||
| * | ||
| * The preview will render the mobile variant (styling and layout) when the | ||
| * `previewDevice` is phone or tablet. Note that the styling cannot be matched | ||
| * 100% due to the above `@media` query limitation. | ||
| */ | ||
| function ContentPreview({ | ||
| question, | ||
| apiOptions, | ||
| seamless, | ||
| linterContext, | ||
| legacyPerseusLint, | ||
| previewDevice, | ||
| }: { | ||
| question?: PerseusRenderer; | ||
| apiOptions?: APIOptions; | ||
| seamless?: boolean; | ||
| linterContext?: LinterContextProps; | ||
| legacyPerseusLint?: ReadonlyArray<string>; | ||
| previewDevice: DeviceType; | ||
| }) { | ||
| const i18n = usePerseusI18n(); | ||
| const isMobile = previewDevice !== "desktop"; | ||
|
|
||
| const className = isMobile ? "perseus-mobile" : ""; | ||
|
|
||
| return ( | ||
| <View | ||
| className={`framework-perseus ${className}`} | ||
| style={[styles.container, !seamless ? styles.gutter : undefined]} | ||
| > | ||
| <StatefulKeypadContextProvider> | ||
| <KeypadContext.Consumer> | ||
| {({setKeypadActive, keypadElement, setKeypadElement}) => ( | ||
| <> | ||
| <Renderer | ||
| strings={i18n.strings} | ||
| apiOptions={{...apiOptions, isMobile}} | ||
| keypadElement={keypadElement} | ||
| linterContext={linterContext} | ||
| legacyPerseusLint={legacyPerseusLint} | ||
| {...question} | ||
| /> | ||
|
|
||
| <MobileKeypad | ||
| onAnalyticsEvent={() => Promise.resolve()} | ||
| onDismiss={() => setKeypadActive(false)} | ||
| onElementMounted={setKeypadElement} | ||
| /> | ||
| </> | ||
| )} | ||
| </KeypadContext.Consumer> | ||
| </StatefulKeypadContextProvider> | ||
| </View> | ||
| ); | ||
| } | ||
|
|
||
| const styles = StyleSheet.create({ | ||
| container: { | ||
| padding: spacing.xxxSmall_4, | ||
| containerType: "inline-size", | ||
| containerName: "perseus-root", | ||
| }, | ||
| gutter: {marginRight: constants.lintGutterWidth}, | ||
| }); | ||
|
|
||
| export default ContentPreview; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.