Merge branch 'seven' into image-alignment

Author: avoinea

packages/blocks/Teaser/schema.tsx

@@ -23,8 +23,9 @@ export function TeaserSchema({
       href: {
         title: 'Target',
         widget: 'object_browser',
-        mode: 'link',
+        mode: 'single',
         selectedItemAttrs: [
+          '@id',
           'Title',
           'title',
           'Description',
@@ -59,7 +60,7 @@ export function TeaserSchema({
         widget: 'object_browser',
         mode: 'image',
         allowExternals: true,
-        selectedItemAttrs: ['image_field', 'image_scales'],
+        selectedItemAttrs: ['@id', 'image_field', 'image_scales'],
       },
       openLinkInNewTab: {
         title: 'Open in a new tab',

packages/blocks/news/+fix-teaser-schema.bugfix

@@ -0,0 +1 @@
+Fix Teaser block object browser configuration: the target field now uses single selection mode, and the required item identifier is included in the selected attributes for both the target and image fields. @iFlameing

packages/cmsui/components/ContentForm/ContentForm.tsx

@@ -153,8 +153,12 @@ export default function ContentForm({
                 <Checkbox />
               </button>
             </Plug>
-            <Plug pluggable="toolbar-top" id="button-cancel">
-              <Link aria-label="Cancel" href="/">
+            <Plug
+              pluggable="toolbar-top"
+              id="button-cancel"
+              dependencies={[content['@id']] as any}
+            >
+              <Link aria-label="Cancel" href={content['@id']}>
                 <Close />
               </Link>
             </Plug>

packages/cmsui/components/ImageWidget/ImageWidget.tsx

@@ -389,7 +389,7 @@ function ImageInputBase({
           <ObjectBrowserProvider
             config={{
               mode: objectBrowserMode,
-              selectedAttrs: ['@id', 'title'],
+              selectedItemAttrs: ['@id', 'title'],
               onChange: onSelectInternalImage,
               initialPath: resolvedCurrentPath,
               title: 'Pick an existing image',

packages/cmsui/components/ObjectBrowserWidget/ObjectBrowserContext.tsx

@@ -37,7 +37,7 @@ export interface UseObjectBrowserConfig {
   widgetOptions?: {
     pattern_options?: PatternOptions;
   };
-  selectedAttrs?: Array<keyof Brain>;
+  selectedItemAttrs?: Array<keyof Brain>;
   // TODO: Also add blockchange/slate signature compat
   onChange?: (selected: Partial<Brain>[]) => void;
   defaultValue?: Brain[];
@@ -50,7 +50,7 @@ const useObjectBrowserInternal = (config: UseObjectBrowserConfig = {}) => {
   const {
     mode = 'multiple',
     widgetOptions = {},
-    selectedAttrs = ['@id', 'title', 'description', '@type', 'UID'],
+    selectedItemAttrs = ['@id', 'title', 'description', '@type', 'UID'],
     onChange,
     defaultValue = [],
     title,
@@ -72,13 +72,13 @@ const useObjectBrowserInternal = (config: UseObjectBrowserConfig = {}) => {
       return brains.map(
         (item) =>
           Object.fromEntries(
-            selectedAttrs
+            selectedItemAttrs
               .filter((attr) => attr in item)
               .map((attr) => [attr, item[attr]]),
           ) as Partial<Brain>,
       );
     },
-    [selectedAttrs],
+    [selectedItemAttrs],
   );
 
   const handleSelectionChange = useCallback(
@@ -184,7 +184,7 @@ const useObjectBrowserInternal = (config: UseObjectBrowserConfig = {}) => {
 
     // Config
     mode,
-    selectedAttrs,
+    selectedItemAttrs,
     title,
     widgetOptions,
   };

packages/cmsui/components/ObjectBrowserWidget/ObjectBrowserWidgetBody.tsx

@@ -54,6 +54,7 @@ export function ObjectBrowserWidgetBody() {
   }, [currentPath, loading, items]);
 
   const handleNavigation = (item: Brain) => {
+    if (!item.is_folderish) return;
     navigateTo(item['@id']);
     setSearchMode(false);
   };
@@ -142,10 +143,11 @@ export function ObjectBrowserWidgetBody() {
                 count: items?.length ?? 0,
               })}`}
           key={`${viewMode}-${currentPath}`} // Force re-render on viewMode or path change
-          selectionMode={'multiple'}
+          selectionMode={mode === 'single' ? 'single' : 'multiple'}
           disabledBehavior="selection"
           escapeKeyBehavior="none"
-          selectionBehavior={'toggle'}
+          selectionBehavior={mode === 'single' ? 'replace' : 'toggle'}
+          dependencies={[selectedItems]}
           items={items ?? []}
           layout={viewMode ? 'grid' : 'stack'}
           // Todo: better styling
@@ -181,15 +183,10 @@ export function ObjectBrowserWidgetBody() {
           }
         >
           {(item) => {
-            // Convert selectedItems IDs to actual Brain objects for isSelectable
-            const selectedItemObjects = selectedItems
-              .map((id) => items?.find((item) => item['@id'] === id))
-              .filter(Boolean) as Brain[];
-
             const disabled = !isSelectable(item, {
               ...widgetOptions,
               mode,
-              items: selectedItemObjects,
+              selectedItemIds: selectedItems,
             });
             const isSelected = selectedItems.includes(item['@id']);
             const reviewState = item.review_state || undefined;
@@ -200,7 +197,9 @@ export function ObjectBrowserWidgetBody() {
                 textValue={getItemLabel(t, item, isSelected, disabled)}
                 aria-label={getItemLabel(t, item, isSelected, disabled)}
                 data-selectable={!disabled}
-                onAction={() => handleNavigation(item)}
+                onAction={
+                  mode !== 'single' ? () => handleNavigation(item) : undefined
+                }
                 isDisabled={disabled}
                 className={itemVariants({
                   viewMode: viewMode ? 'grid' : 'list',

packages/cmsui/components/ObjectBrowserWidget/utils.ts

@@ -31,7 +31,7 @@ export type WidgetPatternOptions = {
     selectableTypes?: Content['@type'][];
     [key: string]: any;
   };
-  items: PartialBrainWithRequired[];
+  selectedItemIds: string[];
   mode: ObjectBrowserWidgetMode;
 };
 
@@ -96,7 +96,7 @@ const isSelectable = (
   item: PartialBrainWithRequired,
   options: WidgetPatternOptions,
 ) => {
-  const { pattern_options, items } = options;
+  const { pattern_options, selectedItemIds, mode } = options;
   const { maximumSelectionSize, selectableTypes } = pattern_options || {
     maximumSelectionSize: undefined,
     selectableTypes: [],
@@ -111,10 +111,14 @@ const isSelectable = (
     return false;
   }
 
-  // Second check: respect maximum selection limit
-  if (maximumSelectionSize && items && maximumSelectionSize <= items.length) {
+  // Second check: respect maximum selection limit (multiple mode only)
+  if (
+    isMultipleMode(mode) &&
+    maximumSelectionSize &&
+    maximumSelectionSize <= selectedItemIds.length
+  ) {
     // At limit: only already selected items are selectable (for deselection)
-    return items.some((i) => i['@id'] === item['@id']);
+    return selectedItemIds.includes(item['@id']);
   }
 
   // All checks passed

packages/cmsui/news/+fix-cancel-button-href.bugfix

@@ -0,0 +1 @@
+Fix toolbar cancel button navigating to site root instead of current content page. @iFlameing

packages/cmsui/news/+fixobjectbrowser.bugfix

@@ -0,0 +1 @@
+Fix several issues in the Object Browser widget: single selection mode now behaves correctly, clicking a non-folder item no longer attempts navigation, the maximum selection limit is ignored in single mode, and the API for specifying which item attributes to return has been renamed for consistency across the codebase. @iFlameing

packages/plate/components/editor/plugins/slash-menu.tsx

@@ -12,7 +12,6 @@ import {
   Heading2Icon,
   Heading3Icon,
   Heading4Icon,
-  ImageIcon,
   LightbulbIcon,
   ListIcon,
   ListOrdered,
@@ -139,12 +138,6 @@ const createStaticGroups = (): SlashMenuGroup[] => [
         label: 'Text',
         value: KEYS.p,
       },
-      {
-        icon: <ImageIcon />,
-        keywords: ['img', 'picture', 'photo'],
-        label: 'Image',
-        value: KEYS.img,
-      },
       {
         icon: <Heading2Icon />,
         keywords: ['subtitle', 'h2'],