Add a proof of concept for rendering one column

This commit adds a proof of concept for allowing Perseus to render only
a single column when the content contains two columns. The idea is that
the containing page would render two separate `ServerItemRenderer`
components, one for each column. It could then control how each column
is laid out.

Example code:

```
<div class="column-wrapper">
    <div class="left-column">
        <ServerItemRenderer
            item={item}
            apiOptions={{renderColumn: "left"}} />
    </div>
    <div class="right-column">
        <ServerItemRenderer
            item={item}
            apiOptions={{renderColumn: "right"}} />
    </div>
</div>
```

packages/perseus/src/__stories__/server-item-renderer.stories.tsx

@@ -4,6 +4,7 @@ import {ServerItemRendererWithDebugUI} from "../../../../testing/server-item-ren
 import {
     itemWithInput,
     labelImageItem,
+    satPassageItem,
 } from "../__testdata__/item-renderer.testdata";
 
 type StoryArgs = Record<any, any>;
@@ -23,3 +24,15 @@ export const InputNumberItem = (args: StoryArgs): React.ReactElement => {
 export const LabelImageItem = (args: StoryArgs): React.ReactElement => {
     return <ServerItemRendererWithDebugUI item={labelImageItem} />;
 };
+
+export const SATPassageItem = (args: StoryArgs): React.ReactElement => {
+    return <ServerItemRendererWithDebugUI item={satPassageItem} />;
+};
+
+export const SATPassageItemLeftColumn = (args: StoryArgs): React.ReactElement => {
+    return <ServerItemRendererWithDebugUI item={satPassageItem} apiOptions={{renderColumn: "left"}} />;
+};
+
+export const SATPassageItemRightColumn = (args: StoryArgs): React.ReactElement => {
+    return <ServerItemRendererWithDebugUI item={satPassageItem} apiOptions={{renderColumn: "right"}}/>;
+};

packages/perseus/src/__testdata__/item-renderer.testdata.ts

@@ -158,3 +158,103 @@ export const mockedItem: PerseusItem = {
     itemDataVersion: {major: 0, minor: 0},
     answer: null,
 };
+
+export const satPassageItem: PerseusItem = {
+    "question": {
+        "content": ">Select text to highlight it. _(Laptop/desktop only)_\n\n>**This passage is excerpted from Louisa May Alcott, *Rose in Bloom*, originally published in 1876. **\n\n[[☃ passage 1]]\n\n=====\n\n[[☃ group 1]]",
+        "images": {},
+        "widgets": {
+            "passage 1": {
+                "type": "passage",
+                "alignment": "default",
+                "static": false,
+                "graded": true,
+                "options": {
+                    "static": false,
+                    "passageTitle": "",
+                    "passageText": "Three young men stood together on a wharf one bright October day awaiting the arrival of an ocean steamer with an impatience which found a {{vent}} in lively skirmishes with a small lad, who pervaded the premises like a will-o'-the-wisp and afforded much amusement to the other groups assembled there.\n\n{{\"{{They are the Campbells, waiting for their cousin, who has been abroad several years with her uncle, the doctor,\"}} whispered one lady to another as the handsomest of the young men touched his hat to her as he passed, lugging the boy, whom he had just rescued from a little expedition down among the piles.\n\n\"Which is that?\" asked the stranger.\n\n{{\"Prince Charlie, as he's called a fine fellow, the most promising of the seven, but a little fast, people say,\" }}answered the first speaker with a shake of the head.\n\"Are the others his brothers?\"\n\n\"No, cousins. {{The elder is Archie, a most exemplary young man. He has just gone into business with the merchant uncle and bids fair to be an honor to his family. }}The other, with the eyeglasses and no gloves, is Mac, the odd one, just out of college.\"\n\n\"And the boy?\"\n\n{{\"Oh, he is Jamie, the youngest brother of Archibald, and the pet of the whole family. Mercy on us he'll be in if they don't hold on to him}}!\"}}\n\nThe ladies' chat came to a sudden end just there, for by the time Jamie had been fished out of a hogshead, the steamer hove in sight and everything else was forgotten. As it swung slowly around to enter the dock, a boyish voice shouted, \"There she is! I see her and Uncle and Phebe! Hooray for Cousin Rose!\" And three small cheers were given with a will by Jamie as he stood on a post waving his arms like a windmill while his brother held onto the tail of his jacket.\n\nYes, there they were, Uncle Alec swinging his hat like a boy, with Phebe smiling and nodding on one side and Rose kissing both hands delightedly on the other as she recognized familiar faces and heard familiar voices welcoming her home.\n\n\"Bless her dear heart, she's bonnier than ever! Looks like a Madonna doesn't she? with that blue cloak round her, and her bright hair flying in the wind!\" said Charlie excitedly as they watched the group upon the deck with eager eyes.\n\n{{\"Madonnas don't wear hats like that. Rose hasn't changed much, but Phebe has. Why, she's a regular beauty!\"}} answered Archie, staring with all his might at the dark-eyed young woman with the brilliant color and glossy black braids shining in the sun.\n\n{{\"Dear old Uncle! Doesn't it seem good to have him back?\"}}{{ was all Mac said, but he was not looking at \"dear old uncle\" as he made the fervent remark, for he saw only the slender blond girl nearby and stretched out his hands to meet hers, forgetful of the green water tumbling between them.}}\n\nDuring the confusion that reigned for a moment as the steamer settled to her moorings, Rose looked down into the four faces upturned to hers and seemed to read in them something that both pleased and pained her. {{It was only a glance, and her own eyes were full, but through the mist of happy tears she received the impression that Archie was about the same, that Mac had decidedly improved, and that something was amiss with Charlie.}} {{ There was no time for observation, however, for in a moment the shoreward rush began, and before she could grasp her traveling bag, Jamie was clinging to her like an ecstatic young bear.}} {{ She was with difficulty released from his embrace to fall into the gentler ones of the elder cousins, who took advantage of the general excitement to welcome both blooming girls with {{affectionate impartiality}}. }}Then the wanderers were borne ashore in a triumphal procession, while Jamie danced rapturous jigs before them even on the gangway.\n\nArchie remained to help his uncle get the luggage through the Custom House, and the others escorted the damsels home. {{No sooner were they shut up in a carriage, however, than a new and curious constraint seemed to fall upon the young people, for they realized, all at once, that their former playmates were men and women now.}}",
+                    "footnotes": "",
+                    "showLineNumbers": true
+                },
+                "version": {
+                    "major": 0,
+                    "minor": 0
+                }
+            },
+            "group 1": {
+                "type": "group",
+                "alignment": "default",
+                "static": false,
+                "graded": true,
+                "options": {
+                    "content": "Which choice best summarizes the passage?\n\n[[☃ radio 1]]",
+                    "images": {},
+                    "widgets": {
+                        "radio 1": {
+                            "type": "radio",
+                            "alignment": "default",
+                            "static": false,
+                            "graded": true,
+                            "options": {
+                                "choices": [
+                                    {
+                                        "content": "The passage provides an explanation of relationships within a family.\n",
+                                        "correct": false,
+                                        "clue": "Although the passage does discuss various members of the family, this isn't the main point of the passage."
+                                    },
+                                    {
+                                        "content": "The passage presents a revelation about children growing older.\n",
+                                        "correct": true,
+                                        "clue": "This choice is the best answer. The passage describes the return of Rose and Phebe, and the changes that the young characters see in each other. In addition, the passage notes that the characters' \"former playmates were men and women now.\""
+                                    },
+                                    {
+                                        "content": "The passage captures a conversation regarding reuniting cousins.\n",
+                                        "correct": false,
+                                        "clue": "The passage does depict cousins reuniting; however, the focus of the brief dialogue is mostly the physical changes that  the characters observe."
+                                    },
+                                    {
+                                        "content": "The passage describes an anecdote about traveling by ship.",
+                                        "correct": false,
+                                        "clue": "In the passage, the two young women are just returning from a journey by ship, but the passage does not depict the journey itself or relate an anecdote."
+                                    }
+                                ],
+                                "randomize": false,
+                                "multipleSelect": false,
+                                "countChoices": false,
+                                "displayCount": null,
+                                "hasNoneOfTheAbove": false,
+                                "deselectEnabled": false
+                            },
+                            "version": {
+                                "major": 1,
+                                "minor": 0
+                            }
+                        }
+                    },
+                    "metadata": [
+                        "ag5zfmtoYW4tYWNhZGVteXI2CxIRQXNzZXNzbWVudEl0ZW1UYWciATAMCxIRQXNzZXNzbWVudEl0ZW1UYWcYgICAoJ64pwoM",
+                        "ag5zfmtoYW4tYWNhZGVteXI2CxIRQXNzZXNzbWVudEl0ZW1UYWciATAMCxIRQXNzZXNzbWVudEl0ZW1UYWcYgICAoO7zqwoM"
+                    ]
+                },
+                "version": {
+                    "major": 0,
+                    "minor": 0
+                }
+            },
+        }
+    },
+    "answerArea": {
+        "calculator": false,
+        "chi2Table": false,
+        "periodicTable": false,
+        "tTable": false,
+        "zTable": false
+    },
+    "itemDataVersion": {
+        "major": 0,
+        "minor": 1
+    },
+    "hints": [],
+    _multi: null,
+    answer: null,
+};

packages/perseus/src/perseus-markdown.tsx

@@ -15,6 +15,12 @@ const rules = {
     columns: {
         ...pureMarkdownRules.columns,
         react: (node, output, state) => {
+            if (state.renderColumn === "left") {
+                return output(node.col1, state);
+            } else if (state.renderColumn === "right") {
+                return output(node.col2, state);
+            }
+
             return (
                 <div className="perseus-two-columns" key={state.key}>
                     <div className="perseus-column">

packages/perseus/src/renderer.tsx

@@ -80,6 +80,7 @@ type WidgetState = {
     paragraphIndex?: number;
     foundFullWidth?: boolean;
     baseElements?: any;
+    renderColumn?: "left" | "right";
 };
 
 type SetWidgetPropsFn = (
@@ -1325,9 +1326,13 @@ class Renderer extends React.Component<Props, State> {
             // things like this
             this._isTwoColumn = true;
             // but then render normally:
+            let columnsState = {
+                ...state,
+                renderColumn: this.getApiOptions().renderColumn,
+            };
             return (
                 <ErrorBoundary key={state.key}>
-                    {PerseusMarkdown.ruleOutput(node, nestedOutput, state)}
+                    {PerseusMarkdown.ruleOutput(node, nestedOutput, columnsState)}
                 </ErrorBoundary>
             );
         }

packages/perseus/src/types.ts

@@ -233,6 +233,9 @@ export type APIOptions = Readonly<{
     // keystroke caused text typed in the text area to appear in it
     // only after a good few seconds.
     editorChangeDelay?: number;
+    // If the content contains a column separator, only render the specified
+    // column.
+    renderColumn?: "left" | "right";
 }>;
 
 type TeXProps = {