Merge main

applications/browser-extension/end-to-end-tests/tests/pageEditor/saveMod.spec.ts

@@ -52,7 +52,6 @@ test("can save a new trigger mod", async ({
 
 test("#9349: can save new mod with multiple components", async ({
   page,
-  extensionId,
   newPageEditorPage,
 }) => {
   await page.goto("/");

applications/browser-extension/package.json

@@ -105,7 +105,7 @@
     "kbar": "^0.1.0-beta.45",
     "lodash-es": "^4.17.21",
     "mark.js": "^8.11.1",
-    "marked": "^14.1.3",
+    "marked": "^15.0.0",
     "memoize-one": "^6.0.0",
     "mustache": "^4.2.0",
     "nunjucks": "^3.2.4",

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

@@ -3,7 +3,6 @@ import {
   type SelectStringOption,
   type SetActiveField,
 } from "@/components/formBuilder/formBuilderTypes";
-import FieldEditor from "./fieldEditor/FieldEditor";
 import {
   moveStringInArray,
   getNormalizedUiOrder,
@@ -13,6 +12,7 @@ import FieldTemplate from "@/components/form/FieldTemplate";
 import LayoutWidget from "@/components/LayoutWidget";
 import { findLast } from "lodash";
 import { type FormikErrors } from "formik";
+import FieldEditor from "@/components/formBuilder/edit/fieldEditor/FieldEditor";
 
 export const ActiveField: React.FC<{
   name: string;

applications/browser-extension/src/components/formBuilder/formBuilderHelpers.ts

@@ -66,11 +66,6 @@ export const FIELD_TYPES_WITHOUT_DEFAULT = [
     propertyType: "string",
     propertyFormat: "data-url",
   }),
-  stringifyUiType({
-    propertyType: "string",
-    uiWidget: "richText",
-    propertyFormat: "html",
-  }),
   stringifyUiType({
     propertyType: "string",
     uiWidget: "imageCrop",

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

@@ -28,6 +28,7 @@ const RichTextWidget: React.FunctionComponent<WidgetProps> = ({
   disabled,
   readonly,
   options,
+  value
 }) => {
   const { database } = options;
 
@@ -45,6 +46,7 @@ const RichTextWidget: React.FunctionComponent<WidgetProps> = ({
       }}
       editable={!(disabled || readonly)}
       assetDatabaseId={validateUUID(database)}
+      content={typeof value === "string" ? value : ""}
     />
   );
 };

applications/browser-extension/src/components/richTextEditor/ErrorToast.tsx

@@ -35,10 +35,12 @@ const ErrorToast: React.FC<ErrorToastProps> = ({ error, onClose }) => (
     animation={false}
     delay={5000}
   >
+    <span>
     <FontAwesomeIcon className="mr-2" icon={faExclamationCircle} /> {error}
     <Button variant="outline-danger" onClick={onClose}>
       <FontAwesomeIcon icon={faTimes} />
     </Button>
+      </span>
   </Toast>
 );
 

applications/browser-extension/src/components/richTextEditor/RichTextEditor.module.scss

@@ -44,15 +44,18 @@
 }
 
 .error {
-  display: flex !important;
-  align-items: center;
   color: #dc3545;
   padding: 4px 8px;
   font-size: 0.875rem;
   position: absolute;
   bottom: 4px;
   left: 4px;
 
+  span {
+    display: flex;
+    align-items: center;
+  }
+
   :global(.btn) {
     margin-left: 8px;
     color: #dc3545;

applications/browser-extension/src/pageEditor/hooks/useCreateModFromUnsavedMod.ts

@@ -116,6 +116,14 @@ function useCreateModFromUnsavedMod(): UseCreateModFromUnsavedModReturn {
         if (activeModId === unsavedModId) {
           // If the mod list item is selected, reselect the mod item using the new id
           dispatch(editorActions.setActiveModId(newModId));
+          // Preserve the activeModComponentId if there is one
+          if (activeModComponentFormState?.uuid) {
+            dispatch(
+              editorActions.setActiveModComponentId(
+                activeModComponentFormState.uuid,
+              ),
+            );
+          }
         } else if (
           activeModComponentFormState?.modMetadata.id === unsavedModId
         ) {

applications/browser-extension/src/pageEditor/hooks/useEnsureFormStates.ts

@@ -18,7 +18,7 @@
 import { actions } from "@/pageEditor/store/editor/editorSlice";
 import { modComponentToFormState } from "@/pageEditor/starterBricks/adapter";
 import {
-  selectCurrentModId,
+  selectActiveModId,
   selectGetUntouchedActivatedModComponentsForMod,
 } from "@/pageEditor/store/editor/editorSelectors";
 import { useDispatch, useSelector } from "react-redux";
@@ -30,13 +30,13 @@ import { useEffect } from "react";
  */
 function useEnsureFormStates(): void {
   const dispatch = useDispatch();
-  const currentModId = useSelector(selectCurrentModId);
+  const activeModId = useSelector(selectActiveModId);
   const getUntouchedActivatedModComponentsForMod = useSelector(
     selectGetUntouchedActivatedModComponentsForMod,
   );
 
-  const untouchedModComponents = currentModId
-    ? getUntouchedActivatedModComponentsForMod(currentModId)
+  const untouchedModComponents = activeModId
+    ? getUntouchedActivatedModComponentsForMod(activeModId)
     : null;
 
   useEffect(() => {

applications/browser-extension/src/pageEditor/hooks/useRegisterDraftModInstanceOnAllFrames.ts

@@ -31,7 +31,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   selectActiveModComponentFormState,
   selectActiveModComponentId,
-  selectCurrentModId,
+  selectActiveModId,
   selectEditorUpdateKey,
   selectGetModDraftStateForModId,
 } from "@/pageEditor/store/editor/editorSelectors";
@@ -113,7 +113,7 @@ function updateDraftModInstance() {
     const state = getState();
 
     const activeModComponentId = selectActiveModComponentId(state);
-    const modId = selectCurrentModId(state);
+    const modId = selectActiveModId(state);
 
     if (!modId) {
       // Skip if the modId has somehow become null before the microtask for this async method got scheduled
@@ -175,7 +175,7 @@ function updateDraftModInstance() {
  */
 function useRegisterDraftModInstanceOnAllFrames(): void {
   const dispatch = useDispatch<AppDispatch>();
-  const modId = useSelector(selectCurrentModId);
+  const modId = useSelector(selectActiveModId);
   const editorUpdateKey = useSelector(selectEditorUpdateKey);
 
   assertNotNullish(modId, "modId is required");

applications/browser-extension/src/pageEditor/modListingPanel/ModListItem.tsx

@@ -29,7 +29,7 @@ import {
 import { useDispatch, useSelector } from "react-redux";
 import cx from "classnames";
 import {
-  selectActiveModComponentFormState,
+  selectActiveModComponentId,
   selectActiveModId,
   selectDirtyMetadataForModId,
   selectExpandedModId,
@@ -47,24 +47,19 @@ const ModListItem: React.FC<
   const dispatch = useDispatch();
   const activeModId = useSelector(selectActiveModId);
   const expandedModId = useSelector(selectExpandedModId);
-  const activeModComponentFormState = useSelector(
-    selectActiveModComponentFormState,
-  );
+  const activeModComponentId = useSelector(selectActiveModComponentId);
 
   const { id: modId, name: savedName, version: activatedVersion } = modMetadata;
 
-  const isActive = activeModId === modId;
+  const isModComponentSelected = activeModComponentId != null;
+  const isModSelected = activeModId === modId && !isModComponentSelected;
   const isExpanded = expandedModId === modId;
 
   // TODO: Fix this so it pulls from registry, after registry single-item-api-fetch is implemented
   //        (See: https://github.com/pixiebrix/pixiebrix-extension/issues/7184)
   const { data: modDefinition } = useGetModDefinitionQuery({ modId });
   const latestModVersion = modDefinition?.metadata?.version;
 
-  // Set the alternate background if a mod component in this mod is active
-  const hasModBackground =
-    activeModComponentFormState?.modMetadata.id === modId;
-
   const dirtyName = useSelector(selectDirtyMetadataForModId(modId))?.name;
   const name = dirtyName ?? savedName ?? "Loading...";
 
@@ -81,16 +76,19 @@ const ModListItem: React.FC<
         eventKey={modId}
         as={ListGroup.Item}
         className={cx(styles.root, "list-group-item-action", {
-          [styles.modBackground ?? ""]: hasModBackground,
+          // Set the alternate background if a mod component in this mod is active
+          [styles.modBackground ?? ""]: isModSelected || isModComponentSelected,
         })}
         tabIndex={0} // Avoid using `button` because this item includes more buttons #2343
-        active={isActive}
-        key={`mod-${modId}`}
+        active={isModSelected}
+        key={modId}
         onClick={() => {
           dispatch(actions.setActiveModId(modId));
           // Collapse if the user clicks the mod item when it's already active/selected in the listing pane
           dispatch(
-            actions.setExpandedModId(isExpanded && isActive ? null : modId),
+            actions.setExpandedModId(
+              isExpanded && isModSelected ? null : modId,
+            ),
           );
         }}
       >

applications/browser-extension/src/pageEditor/modListingPanel/ModSidebarListItems.tsx

@@ -77,25 +77,33 @@ const ModSidebarListItems: React.FunctionComponent = () => {
     ],
   );
 
-  const listItems = filteredSidebarItems.map((sidebarItem) => {
-    const { modMetadata, modComponents } = sidebarItem;
+  const listItems = useMemo(
+    () =>
+      filteredSidebarItems.map((sidebarItem) => {
+        const { modMetadata, modComponents } = sidebarItem;
 
-    return (
-      <ModListItem key={modMetadata.id} modMetadata={modMetadata}>
-        {modComponents.map((modComponentSidebarItem) => (
-          <ModComponentListItem
-            key={getDraftModComponentId(modComponentSidebarItem)}
-            modComponentSidebarItem={modComponentSidebarItem}
-            availableActivatedModComponentIds={
-              availableActivatedModComponentIds
-            }
-            availableDraftModComponentIds={availableDraftModComponentIds}
-            isNested
-          />
-        ))}
-      </ModListItem>
-    );
-  });
+        return (
+          <ModListItem key={modMetadata.id} modMetadata={modMetadata}>
+            {modComponents.map((modComponentSidebarItem) => (
+              <ModComponentListItem
+                key={getDraftModComponentId(modComponentSidebarItem)}
+                modComponentSidebarItem={modComponentSidebarItem}
+                availableActivatedModComponentIds={
+                  availableActivatedModComponentIds
+                }
+                availableDraftModComponentIds={availableDraftModComponentIds}
+                isNested
+              />
+            ))}
+          </ModListItem>
+        );
+      }),
+    [
+      availableActivatedModComponentIds,
+      availableDraftModComponentIds,
+      filteredSidebarItems,
+    ],
+  );
 
   return (
     <>

applications/browser-extension/src/pageEditor/modListingPanel/modals/CreateModModal.tsx

@@ -25,7 +25,7 @@ import { useDispatch, useSelector } from "react-redux";
 import {
   getModalDataSelector,
   selectActiveModComponentFormState,
-  selectCurrentModId,
+  selectActiveModId,
   selectEditorModalVisibilities,
   selectModMetadataMap,
 } from "@/pageEditor/store/editor/editorSelectors";
@@ -140,8 +140,8 @@ const CreateModModalBody: React.FC<{ onHide: () => void }> = ({ onHide }) => {
   const dispatch = useDispatch();
   const isMounted = useIsMounted();
 
-  const currentModId = useSelector(selectCurrentModId);
-  assertNotNullish(currentModId, "Expected mod or mod component to be active");
+  const activeModId = useSelector(selectActiveModId);
+  assertNotNullish(activeModId, "Expected mod or mod component to be active");
 
   const activeModComponentFormState = useSelector(
     selectActiveModComponentFormState,
@@ -158,11 +158,11 @@ const CreateModModalBody: React.FC<{ onHide: () => void }> = ({ onHide }) => {
   const { createModFromComponent } = useCreateModFromModComponent();
 
   const { data: modDefinition, isFetching: isModDefinitionFetching } =
-    useOptionalModDefinition(currentModId);
+    useOptionalModDefinition(activeModId);
 
   const formSchema = useFormSchema();
 
-  const initialFormState = useInitialFormState(currentModId);
+  const initialFormState = useInitialFormState(activeModId);
 
   const onSubmit: OnSubmit<ModMetadataFormState> = async (values, helpers) => {
     if (isModDefinitionFetching) {
@@ -187,10 +187,10 @@ const CreateModModalBody: React.FC<{ onHide: () => void }> = ({ onHide }) => {
       ) {
         // Handle "Save As" case where the mod is unsaved or the user no longer has access to the mod definition
         assertNotNullish(
-          currentModId,
+          activeModId,
           "Expected mod to be selected in the editor",
         );
-        await createModFromUnsavedMod(currentModId, values);
+        await createModFromUnsavedMod(activeModId, values);
       } else {
         await createModFromMod(modDefinition, values, modalData);
       }

applications/browser-extension/src/pageEditor/modListingPanel/modals/SaveAsNewModModal.tsx

@@ -20,7 +20,7 @@ import { useDispatch, useSelector } from "react-redux";
 import { actions } from "@/pageEditor/store/editor/editorSlice";
 import { Button, Modal } from "react-bootstrap";
 import {
-  selectCurrentModId,
+  selectActiveModId,
   selectEditorModalVisibilities,
 } from "@/pageEditor/store/editor/editorSelectors";
 import { useOptionalModDefinition } from "@/modDefinitions/modDefinitionHooks";
@@ -32,7 +32,7 @@ const SaveAsNewModModal: React.FC = () => {
     selectEditorModalVisibilities,
   );
 
-  const modId = useSelector(selectCurrentModId);
+  const modId = useSelector(selectActiveModId);
   const { data: mod, isFetching } = useOptionalModDefinition(modId);
   const modName = mod?.metadata?.name ?? "this mod";
 

applications/browser-extension/src/pageEditor/modals/addBrickModal/useAddBrick.ts

@@ -74,7 +74,9 @@ function useAddBrick(): AddBrick {
         brick,
         compact([
           "input" as OutputKey,
-          ...Object.values(pipelineMap).map((x) => x.blockConfig.outputKey),
+          ...Object.values(pipelineMap ?? {}).map(
+            (x) => x.blockConfig.outputKey,
+          ),
         ]),
       );
       const newBrick = createNewConfiguredBrick(brick.id, {