fix(app-headless-cms): sort renderers before picking defaults [skip ci]

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog.tsx

@@ -5,22 +5,17 @@ import { Dialog, DialogContent, DialogTitle, DialogActions } from "~/admin/compo
 import { Form, FormOnSubmit } from "@webiny/form";
 import { Tabs, Tab } from "@webiny/ui/Tabs";
 import { i18n } from "@webiny/app/i18n";
-import {
-    CmsEditorContentModel,
-    CmsModelField,
-    CmsEditorFieldRendererPlugin,
-    CmsEditorFieldTypePlugin
-} from "~/types";
-import { plugins } from "@webiny/plugins";
+import { CmsEditorContentModel, CmsModelField } from "~/types";
 import GeneralTab from "./EditFieldDialog/GeneralTab";
 import AppearanceTab from "./EditFieldDialog/AppearanceTab";
 import PredefinedValues from "./EditFieldDialog/PredefinedValues";
 import { ValidatorsList } from "./EditFieldDialog/ValidatorsList";
 import { ButtonDefault, ButtonPrimary } from "@webiny/ui/Button";
-import { useModelField, useModelEditor, useModel } from "~/admin/hooks";
+import { useModelField, useModelEditor } from "~/admin/hooks";
 import { ModelFieldProvider } from "~/admin/components/ModelFieldProvider";
 import { ValidationsSection } from "~/admin/components/FieldEditor/EditFieldDialog/ValidationsSection";
 import { getFieldValidators, getListValidators } from "./EditFieldDialog/getValidators";
+import { useRendererPlugins } from "~/admin/components/FieldEditor/EditFieldDialog/useRendererPlugins";
 
 const t = i18n.namespace("app-headless-cms/admin/components/editor");
 
@@ -41,18 +36,11 @@ const FullScreenDialog = styled(Dialog)`
     }
 `;
 
-function setupState(
-    field: CmsModelField,
-    fieldPlugin: CmsEditorFieldTypePlugin,
-    contentModel: CmsEditorContentModel
-): EditFieldState {
+function setupState(field: CmsModelField, contentModel: CmsEditorContentModel): EditFieldState {
     const clonedField = cloneDeep(field);
-    const { model } = useModel();
 
     if (!clonedField.renderer || !clonedField.renderer.name) {
-        const [renderPlugin] = plugins
-            .byType<CmsEditorFieldRendererPlugin>("cms-editor-field-renderer")
-            .filter(item => item.renderer.canUse({ field, fieldPlugin, model }));
+        const [renderPlugin] = useRendererPlugins();
 
         if (renderPlugin) {
             clonedField.renderer = { name: renderPlugin.renderer.rendererName };
@@ -78,9 +66,7 @@ interface EditFieldDialogProps {
 const EditFieldDialog = (props: EditFieldDialogProps) => {
     const { field, fieldPlugin } = useModelField();
     const { data: contentModel, setData: setContentModelData } = useModelEditor();
-    const [{ shadowField, isTitleField }] = useState<EditFieldState>(
-        setupState(field, fieldPlugin, contentModel)
-    );
+    const [{ shadowField, isTitleField }] = useState(setupState(field, contentModel));
 
     const headerTitle = t`Field Settings - {fieldTypeLabel}`({
         fieldTypeLabel: fieldPlugin.field.label

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/AppearanceTab.tsx

@@ -9,8 +9,7 @@ import { allowCmsLegacyRichTextInput } from "~/utils/allowCmsLegacyRichTextInput
 import { Typography } from "@webiny/ui/Typography";
 import { RendererOptions } from "./AppearanceTab/RendererOptions";
 import { LegacyRichTextInput } from "./AppearanceTab/LegacyRichTextInput";
-import { useRendererPlugins } from "./AppearanceTab/useRendererPlugins";
-import { useSelectFirstAvailableRenderer } from "./AppearanceTab/useSelectFirstAvailableRenderer";
+import { useRendererPlugins } from "./useRendererPlugins";
 
 const t = i18n.ns("app-headless-cms/admin/content-model-editor/tabs/appearance-tab");
 
@@ -33,8 +32,6 @@ const AppearanceTab = () => {
         validate: validation.create("required")
     });
 
-    useSelectFirstAvailableRenderer(rendererName);
-
     const selectedPlugin = rendererName.value
         ? renderers.find(pl => pl.renderer.rendererName === rendererName.value)
         : undefined;

packages/app-headless-cms/src/admin/components/FieldEditor/EditFieldDialog/GeneralTab.tsx

@@ -17,7 +17,7 @@ const GeneralTab = () => {
     const { data: contentModel } = useModelEditor();
     const { getField } = useModelFieldEditor();
 
-    // Had problems with auto-focusing the "label" field. A couple of comments on this.
+    // Had problems with autofocusing the "label" field. A couple of comments on this.
     // 1. It's probably caused by the Tabs component which wraps this component.
     // 2. It seems that the "autoFocus" prop on the Input doesn't work. I can't see it attached in the actual DOM.
     // 3. This works, but it's not 100%. Visually, the cursor is frozen, and that's probably caused by a bug / design