WB-ify ExpressionEditor (#1480)

## Summary: Move ExpressionEditor to using WB. Issue: Part of [LEMS-2222](https://khanacademy.atlassian.net/browse/LEMS-2222) ## Test plan: Behavior shouldn't change, just move components over to WB. [LEMS-2222]: https://khanacademy.atlassian.net/browse/LEMS-2222?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ Author: handeyeco Reviewers: handeyeco, anakaren-rojas, jeremywiebe Required Reviewers: Approved By: jeremywiebe Checks: ✅ codecov/project, ✅ codecov/patch, ✅ Upload Coverage (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Jest Coverage (ubuntu-latest, 20.x), ✅ Check builds for changes in size (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Lint, Typecheck, Format, and Test (ubuntu-latest, 20.x), ✅ Cypress (ubuntu-latest, 20.x), ✅ Publish Storybook to Chromatic (ubuntu-latest, 20.x), ✅ gerald Pull Request URL: #1480
Khan · Aug 13, 2024 · 182c8f6 · 182c8f6
1 parent c2464ee
commit 182c8f6
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 242 deletions.
diff --git a/.changeset/orange-pants-buy.md b/.changeset/orange-pants-buy.md
@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Refactor ExpressionEditor to use Wonder-Blocks
diff --git a/packages/perseus-editor/src/components/sortable.tsx b/packages/perseus-editor/src/components/sortable.tsx
@@ -1,11 +1,17 @@
+import {css, StyleSheet} from "aphrodite";
 import createReactClass from "create-react-class";
 import PropTypes from "prop-types";
 import * as React from "react";
 import ReactDOM from "react-dom";
 
 const PT = PropTypes;
 
-// Takes an array of components to sort
+/**
+ * Takes an array of components to sort.
+ * As of 08/05/24, there are two sortable components
+ * (one in perseus and one in perseus-editor).
+ * As far as I can tell, this one is only used in ExpressionEditor.
+ */
 // eslint-disable-next-line react/no-unsafe
 const SortableArea = createReactClass({
     propTypes: {
@@ -162,6 +168,7 @@ const SortableItem = createReactClass({
         e.preventDefault();
     },
     render: function () {
+        // I think these might be getting styles from Webapp
         let dragState = "sortable-disabled";
         if (this.props.dragging) {
             dragState = "sortable-dragging";
@@ -172,7 +179,7 @@ const SortableItem = createReactClass({
         return (
             <li
                 draggable={this.props.draggable}
-                className={dragState}
+                className={[dragState, css(styles.sortableListItem)].join(" ")}
                 onDragStart={this.handleDragStart}
                 onDrop={this.handleDrop}
                 onDragEnter={this.handleDragEnter}
@@ -184,4 +191,10 @@ const SortableItem = createReactClass({
     },
 });
 
+const styles = StyleSheet.create({
+    sortableListItem: {
+        margin: "5px 0",
+    },
+});
+
 export default SortableArea;
diff --git a/packages/perseus-editor/src/styles/perseus-editor.less b/packages/perseus-editor/src/styles/perseus-editor.less
@@ -489,41 +489,6 @@
     }
 }
 
-//
-// Expression editor
-//
-.perseus-widget-expression-editor {
-    .answer-options-list li {
-        margin: 5px 0;
-    }
-
-    .answer-status {
-        color: inherit;
-        cursor: pointer;
-        display: inline-block;
-        text-align: center;
-        text-decoration: none;
-        width: 75%; // TODO(joel) 60%?
-        .user-select(none);
-
-        &.wrong {
-            background-color: @wrongRed;
-        }
-
-        &.correct {
-            background-color: @correctGreen;
-        }
-
-        &.ungraded {
-            background-color: @ungradedBlue;
-        }
-    }
-
-    .expression-editor-h3 {
-        margin: 10px 0 4px;
-    }
-}
-
 //
 // Dropdown editor
 //
@@ -1035,61 +1000,6 @@
     margin-top: 22px;
 }
 
-.expression-answer-option {
-    border: 1px solid #ddd;
-    border-radius: 3px;
-
-    .answer-handle {
-        // textured draggy handle
-        background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAeCAYAAADkftS9AAAAIklEQVQoU2M4c+bMfxAGAgYYmwGrIIiDjrELjpo5aiZeMwF+yNnOs5KSvgAAAABJRU5ErkJggg==)
-            no-repeat 50% 50%;
-        border-right: 1px solid #ddd;
-        cursor: move;
-        display: table-cell;
-        width: 20px;
-    }
-
-    .answer-body {
-        display: table-cell;
-    }
-
-    .answer-considered {
-        display: table;
-    }
-
-    .answer-expression {
-        display: table-cell;
-    }
-
-    .answer-status {
-        display: table-cell;
-        width: 100px;
-    }
-
-    .answer-option {
-        padding-left: 5px;
-    }
-
-    .remove-container {
-        padding: 5px;
-
-        button {
-            width: 100%;
-        }
-    }
-
-    .perseus-math-input {
-        width: 236px;
-
-        .mq-root-block {
-            border-top: none;
-            border-right: none;
-            border-bottom: 1px solid #ddd !important;
-            border-left: 1px solid #ddd !important;
-        }
-    }
-}
-
 //
 // Interaction Editor
 //
@@ -1163,31 +1073,10 @@
     }
 }
 
-.button-set-label {
-    display: block;
-}
-
-// Float the first one left because it has a suboption.
-// This is a minor hack.
-.button-set-label-float {
-    display: block;
-    float: left;
-    margin-right: 10px;
-}
-
 .button-set-separator {
     margin: 10px 0;
 }
 
-// Don't allow selection on this label because I found it very easy to select
-// (don't know why...) which caused the selection to not actually be made.
-// I know this is autoprefixed in prod, but I want it to work in the perseus
-// repo.
-.show-div-button {
-    -webkit-user-select: none;
-    user-select: none;
-}
-
 // double selector for specificity
 .perseus-widget-editor .unit-radio {
     color: black;

diff --git a/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/expression-editor.test.tsx
@@ -73,7 +73,7 @@ describe("expression-editor", () => {
 
         await userEvent.click(
             screen.getByRole("checkbox", {
-                name: "Use × for rendering multiplication instead of a center dot.",
+                name: "Use × instead of ⋅ for multiplication",
             }),
         );
 
@@ -87,12 +87,18 @@ describe("expression-editor", () => {
         act(() => jest.runOnlyPendingTimers());
 
         const input = screen.getByRole("textbox", {
-            name: "Function variables:",
+            name: "Function variables",
         });
 
-        await userEvent.type(input, "x");
+        // make sure we can add things
+        await userEvent.type(input, "x y z");
 
-        expect(onChangeMock).toBeCalledWith({functions: ["x"]});
+        expect(onChangeMock).lastCalledWith({functions: ["x", "y", "z"]});
+
+        // make sure we can remove things
+        await userEvent.type(input, "{backspace}");
+
+        expect(onChangeMock).lastCalledWith({functions: ["x", "y"]});
     });
 
     it("should toggle division checkbox", async () => {
@@ -103,7 +109,7 @@ describe("expression-editor", () => {
 
         await userEvent.click(
             screen.getByRole("checkbox", {
-                name: "show \\div button",
+                name: "show ÷ button",
             }),
         );
 

diff --git a/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx b/packages/perseus-editor/src/widgets/__tests__/numeric-input-editor.test.tsx
@@ -117,7 +117,7 @@ describe("numeric-input-editor", () => {
         render(<NumericInputEditor onChange={onChangeMock} />);
 
         const input = screen.getByRole("textbox", {
-            name: "Label text:",
+            name: "Aria label",
         });
 
         await userEvent.type(input, "a");