Add new editingDisabled feature to our Perseus Editors (#2958)

## Summary:
<img width="930" height="480" alt="notouching" src="https://github.com/user-attachments/assets/66531ce4-0bda-44ab-9d77-8c1a868efb68" />

This PR is a proposal for implementing an `editingDisabled` feature to our Perseus Editors, which will allow us to stop Content Creators from performing any changes during a Content Backfill. 

Essentially, I've added a new `editingDisabled` property to our APIOptions, that I then use to do the following:

1. I've added a fieldset and a class around our Editors that becomes disabled when `editingDisabled` is true. This ensures that all of our interactive elements are clearly "disabled" by giving them a slight fade and a darker background for our inputs. 
2. I've also had to pipe down the value to several widget editors in order to solve some unique edge cases: Plotter, Dropdown, Interactive Graph, Matrix, Table, Grapher, Label Image. 

I've used editingDisabled whenever we're dealing with larger wrapper components, and I've used disabled when I need to access the value in more generic form control components. 

As part of this work, I updated a couple editor inputs to use Wonderblocks instead of the link `<a>` tags we were abusing previously. This provides improved a11y, design, and the ability to properly disable the elements. 

[Storybook Exercise Editor Page with Editing Disabled](https://650db21c3f5d1b2f13c02952-xfzsqzdoaj.chromatic.com/?path=/story/editors-editorpage--with-editing-disabled)
[Storybook Article Editor with Editing Disabled](https://650db21c3f5d1b2f13c02952-xfzsqzdoaj.chromatic.com/?path=/story/editors-articleeditor--with-editing-disabled)

**Note:** Ideally, we'd have this property directly applied to all inputs in the widget editors. I could certainly do that, but I was looking for a compromise between time investment and maintainability. I'm open to push back on this, and I could either hook everything up in this PR or make a ticket to do this in the near future. 

Issue: CP-9813

## Test plan:
- Manual Testing 
- Tests pass 
- New "WithEditingDisabled" Story pages for the Article and Exercise Editors, which includes all available widgets.

Author: SonicScrewdriver

Reviewers: SonicScrewdriver, nishasy, jeremywiebe, ivyolamit, mark-fitzgerald, anakaren-rojas

Required Reviewers:

Approved By: nishasy, jeremywiebe

Checks: ✅ 10 checks were successful

Pull Request URL: #2958

Author: SonicScrewdriver

.changeset/stale-elephants-bake.md

@@ -0,0 +1,6 @@
+---
+"@khanacademy/perseus": minor
+"@khanacademy/perseus-editor": minor
+---
+
+Creation of a new editingDisabled mode for our Perseus Editors

.storybook/main.ts

@@ -105,6 +105,7 @@ const config: StorybookConfig = {
         body {
             font-size: 1.4rem;
             padding: 1.6rem 1.6rem 1.6rem 4.8rem !important;
+            line-height: 1.4;
         }
         </style>
     `,

.storybook/preview-head.html

@@ -87,7 +87,6 @@
 <style>
     body {
         font-family: "Lato", sans-serif;
-        font-size: 16px !important;
     }
 
     /* Overrides the ArgTypes table tabs to avoid some z-index issues with

.storybook/styles/base-page-styles.css

@@ -13,7 +13,7 @@
         html element. This allow us to use 10px as the base font size for scaling
         rem units properly. */
         font-size: var(--wb-sizing-size_140);
-        line-height: var(--wb-sizing-size_140);
+        line-height: 1.4;
         height: 100%;
         margin: var(--wb-sizing-size_0);
         color: var(--wb-semanticColor-core-foreground-neutral-strong);
@@ -40,4 +40,12 @@
     .box-sizing-content-box-reset * {
         box-sizing: inherit;
     }
+
+    /* Reset fieldset styles to prevent layout issues and replicate production styles */
+    fieldset {
+        margin: 0;
+        padding: 0;
+        border: none;
+        min-inline-size: 0;
+    }
 }

packages/perseus-editor/src/__docs__/article-editor-initial-state-regression.stories.tsx

@@ -0,0 +1,47 @@
+import {ApiOptions} from "@khanacademy/perseus";
+import * as React from "react";
+import {useRef} from "react";
+
+import {testDependenciesV2} from "../../../../testing/test-dependencies";
+import {comprehensiveQuestion} from "../__testdata__/all-widgets.testdata";
+import ArticleEditor from "../article-editor";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
+import "../styles/perseus-editor.css"; // This helps ensure the styles are loaded correctly and timely
+
+// This is to address timing - Perseus widget editor registry accessed before initialization!
+registerAllWidgetsAndEditorsForTesting();
+
+export default {
+    title: "Editors/ArticleEditor/Visual Regression Tests",
+    component: ArticleEditor,
+    tags: ["!dev"],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "Visual regression tests for the article editor in initial state.",
+            },
+        },
+        chromatic: {disableSnapshot: false, delay: 500},
+    },
+};
+
+export const WithEditingDisabled = (): React.ReactElement => {
+    const articleEditorRef = useRef();
+    const disabledApiOptions = {
+        ...ApiOptions.defaults,
+        editingDisabled: true,
+    };
+
+    return (
+        <ArticleEditor
+            dependencies={testDependenciesV2}
+            apiOptions={disabledApiOptions}
+            imageUploader={() => {}}
+            json={[comprehensiveQuestion]}
+            onChange={() => {}}
+            previewURL="/perseus/frame"
+            ref={articleEditorRef as any}
+        />
+    );
+};

packages/perseus-editor/src/__docs__/article-editor.stories.tsx

@@ -4,11 +4,13 @@ import * as React from "react";
 import {useRef, useState} from "react";
 
 import {testDependenciesV2} from "../../../../testing/test-dependencies";
+import {comprehensiveQuestion} from "../__testdata__/all-widgets.testdata";
 import ArticleEditor from "../article-editor";
 import ContentPreview from "../content-preview";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import PreviewPanel from "./preview-panel";
+import "../styles/perseus-editor.css"; // This helps ensure the styles are loaded correctly and timely
 
 // This is to address timing - Perseus widget editor registry accessed before initialization!
 registerAllWidgetsAndEditorsForTesting();
@@ -54,3 +56,23 @@ export const Demo = (): React.ReactElement => {
         </View>
     );
 };
+
+export const WithEditingDisabled = (): React.ReactElement => {
+    const articleEditorRef = useRef();
+    const disabledApiOptions = {
+        ...ApiOptions.defaults,
+        editingDisabled: true,
+    };
+
+    return (
+        <ArticleEditor
+            dependencies={testDependenciesV2}
+            apiOptions={disabledApiOptions}
+            imageUploader={() => {}}
+            json={[comprehensiveQuestion]}
+            onChange={() => {}}
+            previewURL="/perseus/frame"
+            ref={articleEditorRef as any}
+        />
+    );
+};

packages/perseus-editor/src/__docs__/editor-page-initial-state-regression.stories.tsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+import {comprehensiveQuestion} from "../__testdata__/all-widgets.testdata";
+import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
+
+import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
+import "../styles/perseus-editor.css"; // This helps ensure the styles are loaded correctly and timely
+
+// This is to address timing - Perseus widget editor registry accessed before initialization!
+registerAllWidgetsAndEditorsForTesting();
+
+export default {
+    title: "Editors/EditorPage/Visual Regression Tests",
+    tags: ["!dev"],
+    parameters: {
+        docs: {
+            description: {
+                component:
+                    "Visual regression tests for the editor page in initial state.",
+            },
+        },
+        chromatic: {disableSnapshot: false, delay: 500},
+    },
+};
+
+export const WithEditingDisabled = (): React.ReactElement => {
+    const disabledApiOptions = {
+        editingDisabled: true,
+        isMobile: false,
+    };
+
+    return (
+        <EditorPageWithStorybookPreview
+            question={comprehensiveQuestion}
+            apiOptions={disabledApiOptions}
+        />
+    );
+};

packages/perseus-editor/src/__docs__/editor-page.stories.tsx

@@ -1,9 +1,14 @@
 import {PerseusFeatureFlags} from "@khanacademy/perseus-core";
 import * as React from "react";
 
+import {comprehensiveQuestion} from "../__testdata__/all-widgets.testdata";
+import {question as definitionQuestion} from "../__testdata__/definition.testdata";
+import {question1} from "../__testdata__/numeric-input.testdata";
+import {singleSelectQuestion} from "../__testdata__/radio.testdata";
 import {registerAllWidgetsAndEditorsForTesting} from "../util/register-all-widgets-and-editors-for-testing";
 
 import EditorPageWithStorybookPreview from "./editor-page-with-storybook-preview";
+import "../styles/perseus-editor.css"; // This helps ensure the styles are loaded correctly and timely
 
 // This is to address timing - Perseus widget editor registry accessed before initialization!
 registerAllWidgetsAndEditorsForTesting();
@@ -37,3 +42,33 @@ export const WithAllFlags = (): React.ReactElement => {
         />
     );
 };
+
+export const WithNumericInput = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={question1} />;
+};
+
+export const WithRadioWidget = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={singleSelectQuestion} />;
+};
+
+export const WithDefinitionWidget = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={definitionQuestion} />;
+};
+
+export const WithEditingDisabled = (): React.ReactElement => {
+    const disabledApiOptions = {
+        editingDisabled: true,
+        isMobile: false,
+    };
+
+    return (
+        <EditorPageWithStorybookPreview
+            question={comprehensiveQuestion}
+            apiOptions={disabledApiOptions}
+        />
+    );
+};
+
+export const WithAllWidgets = (): React.ReactElement => {
+    return <EditorPageWithStorybookPreview question={comprehensiveQuestion} />;
+};

packages/perseus-editor/src/__docs__/item-editor.stories.tsx

@@ -21,6 +21,7 @@ const Wrapper = (props: Props) => {
                 onChange?.(e); // to register action in storybook
                 setExtras((prevExtras) => ({...prevExtras, ...e}));
             }}
+            editingDisabled={false}
         />
     );
 };