#9492 Add database to Rich Text Editor form builder field

applications/browser-extension/src/components/formBuilder/edit/ActiveField.tsx

@@ -3,7 +3,7 @@ import {
   type SelectStringOption,
   type SetActiveField,
 } from "@/components/formBuilder/formBuilderTypes";
-import FieldEditor from "./FieldEditor";
+import FieldEditor from "./fieldEditor/FieldEditor";
 import {
   moveStringInArray,
   getNormalizedUiOrder,

applications/browser-extension/src/components/formBuilder/edit/FieldEditor.tsx → applications/browser-extension/src/components/formBuilder/edit/fieldEditor/FieldEditor.tsx

@@ -43,7 +43,7 @@ import SelectWidget, {
 import SwitchButtonWidget, {
   type CheckBoxLike,
 } from "@/components/form/widgets/switchButton/SwitchButtonWidget";
-import { uniq, partial } from "lodash";
+import { uniq } from "lodash";
 import { type SchemaFieldProps } from "@/components/fields/schemaFields/propTypes";
 import SchemaField from "@/components/fields/schemaFields/SchemaField";
 import databaseSchema from "@schemas/database.json";
@@ -55,9 +55,10 @@ import {
 import { type Schema, type SchemaPropertyType } from "@/types/schemaTypes";
 import { AnnotationType } from "@/types/annotationTypes";
 import { isNullOrBlank } from "@/utils/stringUtils";
-import { Collapse } from "react-bootstrap";
-import { joinName, joinPathParts } from "@/utils/formUtils";
+import { joinPathParts } from "@/utils/formUtils";
 import { assertNotNullish } from "@/utils/nullishUtils";
+import TextAreaFields from "@/components/formBuilder/edit/fieldEditor/TextAreaFields";
+import RichTextFields from "@/components/formBuilder/edit/fieldEditor/RichTextFields";
 
 const imageForCroppingSourceSchema: Schema = {
   type: "string",
@@ -95,60 +96,6 @@ function shouldShowPlaceholderText(uiType: UiType): boolean {
   }
 }
 
-const TextAreaFields: React.FC<{ uiOptionsPath: string }> = ({
-  uiOptionsPath,
-}) => {
-  const configName = partial(joinName, uiOptionsPath);
-  const [{ value: showSubmitToolbar }] = useField<boolean | null>(
-    configName("submitToolbar", "show"),
-  );
-
-  return (
-    <>
-      <SchemaField
-        name={configName("rows")}
-        schema={{
-          type: "number",
-          title: "# Rows",
-          description:
-            "The number of visible text lines for the control. If it is not specified, the default value is 2.",
-        }}
-      />
-      <SchemaField
-        name={configName("submitOnEnter")}
-        schema={{
-          type: "boolean",
-          title: "Submit Form on Enter?",
-          description:
-            "If enabled, pressing Enter will submit the form. Press Shift+Enter for newlines in this mode",
-        }}
-        isRequired
-      />
-      <SchemaField
-        name={configName("submitToolbar", "show")}
-        schema={{
-          type: "boolean",
-          title: "Include Submit Toolbar?",
-          description:
-            "Enable the submit toolbar that has a selectable icon to act as a submit button",
-        }}
-        isRequired
-      />
-      <Collapse in={showSubmitToolbar ?? false}>
-        <SchemaField
-          name={configName("submitToolbar", "icon")}
-          schema={{ $ref: "https://app.pixiebrix.com/schemas/icon#" }}
-          label="Select Icon"
-          description="Select the icon that appears in the bottom right of the Submit Toolbar"
-          uiSchema={{
-            "ui:widget": "IconWidget",
-          }}
-        />
-      </Collapse>
-    </>
-  );
-};
-
 const FieldEditor: React.FC<{
   name: string;
   propertyName: string;
@@ -392,6 +339,17 @@ const FieldEditor: React.FC<{
         onChange={onUiTypeChange}
       />
 
+      {uiType.uiWidget === "richText" && (
+        <RichTextFields
+          uiOptionsPath={joinPathParts(
+            name,
+            "uiSchema",
+            propertyName,
+            "ui:options",
+          )}
+        />
+      )}
+
       {uiType.uiWidget === "imageCrop" && (
         <SchemaField
           label="Image source"

applications/browser-extension/src/components/formBuilder/edit/fieldEditor/RichTextFields.tsx

@@ -0,0 +1,46 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import { partial } from "lodash";
+import { joinName } from "@/utils/formUtils";
+import SchemaField from "@/components/fields/schemaFields/SchemaField";
+
+const RichTextFields: React.FunctionComponent<{ uiOptionsPath: string }> = ({
+  uiOptionsPath,
+}) => {
+  const configName = partial(joinName, uiOptionsPath);
+
+  return (
+    <SchemaField
+      name={configName("database")}
+      isRequired
+      schema={{
+        $ref: "https://app.pixiebrix.com/schemas/database#",
+        title: "Asset Database",
+        description:
+          "Asset database to use for image upload. Asset databases are a specific kind of database that" +
+          " can be created in the Admin Console.",
+      }}
+      uiSchema={{
+        "ui:widget": "database",
+      }}
+    />
+  );
+};
+
+export default RichTextFields;

applications/browser-extension/src/components/formBuilder/edit/fieldEditor/TextAreaFields.tsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2024 PixieBrix, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from "react";
+import { partial } from "lodash";
+import { joinName } from "@/utils/formUtils";
+import { useField } from "formik";
+import SchemaField from "@/components/fields/schemaFields/SchemaField";
+import { Collapse } from "react-bootstrap";
+
+const TextAreaFields: React.FC<{ uiOptionsPath: string }> = ({
+  uiOptionsPath,
+}) => {
+  const configName = partial(joinName, uiOptionsPath);
+  const [{ value: showSubmitToolbar }] = useField<boolean | null>(
+    configName("submitToolbar", "show"),
+  );
+
+  return (
+    <>
+      <SchemaField
+        name={configName("rows")}
+        schema={{
+          type: "number",
+          title: "# Rows",
+          description:
+            "The number of visible text lines for the control. If it is not specified, the default value is 2.",
+        }}
+      />
+      <SchemaField
+        name={configName("submitOnEnter")}
+        schema={{
+          type: "boolean",
+          title: "Submit Form on Enter?",
+          description:
+            "If enabled, pressing Enter will submit the form. Press Shift+Enter for newlines in this mode",
+        }}
+        isRequired
+      />
+      <SchemaField
+        name={configName("submitToolbar", "show")}
+        schema={{
+          type: "boolean",
+          title: "Include Submit Toolbar?",
+          description:
+            "Enable the submit toolbar that has a selectable icon to act as a submit button",
+        }}
+        isRequired
+      />
+      <Collapse in={showSubmitToolbar ?? false}>
+        <SchemaField
+          name={configName("submitToolbar", "icon")}
+          schema={{ $ref: "https://app.pixiebrix.com/schemas/icon#" }}
+          label="Select Icon"
+          description="Select the icon that appears in the bottom right of the Submit Toolbar"
+          uiSchema={{
+            "ui:widget": "IconWidget",
+          }}
+        />
+      </Collapse>
+    </>
+  );
+};
+
+export default TextAreaFields;

applications/browser-extension/src/components/formBuilder/widgets/RichTextWidget.test.tsx

@@ -177,5 +177,5 @@ describe("RichTextWidget", () => {
       },
       { submissionCount: 1 },
     );
-  }, 15_000);
+  }, 20_000);
 });

applications/browser-extension/src/components/formBuilder/widgets/RichTextWidget.tsx

@@ -16,7 +16,7 @@
  */
 
 import React from "react";
-import { type WidgetProps } from "@rjsf/utils";
+import { type ErrorSchema, type WidgetProps } from "@rjsf/utils";
 import RichTextEditor from "@/components/richTextEditor/RichTextEditor";
 
 const RichTextWidget: React.FunctionComponent<WidgetProps> = ({
@@ -26,20 +26,35 @@ const RichTextWidget: React.FunctionComponent<WidgetProps> = ({
   onBlur,
   disabled,
   readonly,
-}) => (
-  <RichTextEditor
-    onUpdate={({ editor }) => {
-      onChange(editor.getHTML());
-    }}
-    onFocus={({ editor }) => {
-      editor.commands.focus();
-      onFocus(id, editor.getHTML());
-    }}
-    onBlur={({ editor }) => {
-      onBlur(id, editor.getHTML());
-    }}
-    editable={!(disabled || readonly)}
-  />
-);
+  options,
+  value,
+}) => {
+  const { database } = options;
+
+  if (!database) {
+    // TODO: Can't figure out how to satisfy this type without casting, but this is how it's done in the docs
+    //  https://rjsf-team.github.io/react-jsonschema-form/docs/advanced-customization/custom-widgets-fields/#raising-errors-from-within-a-custom-widget-or-field
+    const databaseConfigurationError = {
+      __errors: ["Rich text field asset database is required"],
+    } as ErrorSchema;
+    onChange(value, databaseConfigurationError);
+  }
+
+  return (
+    <RichTextEditor
+      onUpdate={({ editor }) => {
+        onChange(editor.getHTML());
+      }}
+      onFocus={({ editor }) => {
+        editor.commands.focus();
+        onFocus(id, editor.getHTML());
+      }}
+      onBlur={({ editor }) => {
+        onBlur(id, editor.getHTML());
+      }}
+      editable={!(disabled || readonly)}
+    />
+  );
+};
 
 export default RichTextWidget;