Hide image widget’s remove button in some cases

Fix #372

Author: kyoshino

Diff for: src/lib/components/contents/details/editor/field-editor.svelte

@@ -19,7 +19,7 @@
   /**
    * @import { Component } from 'svelte';
    * @import { Writable } from 'svelte/store';
-   * @import { InternalLocaleCode } from '$lib/types/private';
+   * @import { InternalLocaleCode, WidgetContext } from '$lib/types/private';
    * @import {
    * BooleanField,
    * Field,
@@ -38,6 +38,7 @@
    * @property {InternalLocaleCode} locale Current pane’s locale.
    * @property {FieldKeyPath} keyPath Field key path.
    * @property {Field} fieldConfig Field configuration.
+   * @property {WidgetContext} [context] Where the widget is rendered.
    */
 
   /** @type {Props} */
@@ -46,6 +47,7 @@
     locale,
     keyPath,
     fieldConfig,
+    context = undefined,
     /* eslint-enable prefer-const */
   } = $props();
 
@@ -267,6 +269,7 @@
           {readonly}
           {required}
           {invalid}
+          {context}
         />
       {:else}
         {#if beforeInputLabel}
@@ -286,6 +289,7 @@
           {readonly}
           {required}
           {invalid}
+          {context}
         />
         {#if suffix}
           <div role="none" class="suffix">{suffix}</div>

Diff for: src/lib/components/contents/details/widgets/file/file-editor.svelte

@@ -51,7 +51,7 @@
     required = true,
     readonly = false,
     invalid = false,
-    inEditorComponent = false,
+    context = undefined,
     /* eslint-enable prefer-const */
   } = $props();
 
@@ -85,6 +85,10 @@
   const { maxFileSize, fileTransformations } = $derived(getMediaLibraryConfig({ fieldConfig }));
   const collection = $derived($entryDraft?.collection);
   const entry = $derived($entryDraft?.originalEntry);
+  const showRemoveButton = $derived(
+    !required &&
+      (!context || !['markdown-editor-component', 'single-field-list-widget'].includes(context)),
+  );
 
   /**
    * Reset the current selection.
@@ -245,7 +249,7 @@
               showSelectAssetsDialog = true;
             }}
           />
-          {#if !inEditorComponent}
+          {#if showRemoveButton}
             <Button
               disabled={readonly}
               variant="tertiary"

Diff for: src/lib/components/contents/details/widgets/list/list-editor.svelte

@@ -6,7 +6,6 @@
 <script>
   import {
     Button,
-    Divider,
     Group,
     Icon,
     Menu,
@@ -436,11 +435,20 @@
                         onclick={() => addItem({ index: index + 1 })}
                       />
                     {/if}
-                    <Divider />
-                    <MenuItem label={$_('remove')} onclick={() => removeItem(index)} />
                   </Menu>
                 {/snippet}
               </MenuButton>
+              <Button
+                variant="ghost"
+                size="small"
+                iconic
+                aria-label={$_('remove')}
+                onclick={() => removeItem(index)}
+              >
+                {#snippet startIcon()}
+                  <Icon name="close" />
+                {/snippet}
+              </Button>
             {/snippet}
           </ObjectHeader>
           <div role="none" class="item-body" id="list-{widgetId}-item-{index}-body">
@@ -453,6 +461,7 @@
                       : `${keyPath}.${index}.${subField.name}`}
                     {locale}
                     fieldConfig={subField}
+                    context={hasSingleSubField ? 'single-field-list-widget' : undefined}
                   />
                 {/await}
               {/each}

Diff for: src/lib/components/contents/details/widgets/markdown/component.svelte

@@ -141,7 +141,7 @@
               fieldId={generateElementId('field')}
               fieldLabel={fieldLabel ?? name}
               fieldConfig={{ name, widget }}
-              inEditorComponent={true}
+              context="markdown-editor-component"
               bind:currentValue={inputValues[name]}
               {...rest}
             />

Diff for: src/lib/types/private.js

@@ -678,6 +678,11 @@
  * @property {FileFormatter} [formatter] Formatter method.
  */
 
+/**
+ * Context for a widget, which may change the behavior of the editor/preview.
+ * @typedef {'markdown-editor-component' | 'single-field-list-widget'} WidgetContext
+ */
+
 /**
  * Common properties to be passed to a field widget’s editor component.
  * @typedef {object} WidgetEditorProps
@@ -688,15 +693,15 @@
  * @property {boolean} [required] Whether to mark the field required.
  * @property {boolean} [readonly] Whether to mark the field read-only.
  * @property {boolean} [invalid] Whether to mark the field invalid.
- * @property {boolean} [inEditorComponent] Whether the widget is used in the Markdown widget’s
- * editor component.
+ * @property {WidgetContext} [context] Where the widget is rendered.
  */
 
 /**
  * Common properties to be passed to a field widget’s preview component.
  * @typedef {object} WidgetPreviewProps
  * @property {InternalLocaleCode} locale Current pane’s locale.
  * @property {FieldKeyPath} keyPath Field key path.
+ * @property {WidgetContext} [context] Where the widget is rendered.
  */
 
 /**