decap-cms-core 3.13.0 → 3.14.0

package/src/actions/__tests__/entries.spec.js

@@ -1,4 +1,4 @@
-import { fromJS, Map } from 'immutable';
+import { fromJS, List, Map } from 'immutable';
 import configureMockStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 
@@ -99,6 +99,41 @@ describe('entries', () => {
       });
     });
 
+    it('should populate draft entry from repeated URL param', () => {
+      const store = mockStore({ mediaLibrary: fromJS({ files: [] }) });
+
+      const collection = fromJS({
+        fields: [{ name: 'post', multiple: true }],
+      });
+
+      return store
+        .dispatch(createEmptyDraft(collection, '?post=2026-05-07-test&post=2026-05-08-test'))
+        .then(() => {
+          const actions = store.getActions();
+          expect(actions).toHaveLength(1);
+
+          expect(actions[0]).toEqual({
+            payload: {
+              author: '',
+              collection: undefined,
+              data: { post: List(['2026-05-07-test', '2026-05-08-test']) },
+              meta: {},
+              i18n: {},
+              isModification: null,
+              label: null,
+              mediaFiles: [],
+              partial: false,
+              path: '',
+              raw: '',
+              slug: '',
+              status: '',
+              updatedOn: '',
+            },
+            type: 'DRAFT_CREATE_EMPTY',
+          });
+        });
+    });
+
     it('should html escape URL params', () => {
       const store = mockStore({ mediaLibrary: fromJS({ files: [] }) });
 

package/src/actions/config.ts

@@ -308,11 +308,12 @@ export function applyDefaults(originalConfig: CmsConfig) {
         collection.folder = trim(folder, '/');
 
         if (meta && meta.path) {
+          const metaPath = meta.path;
           const metaField = {
             name: 'path',
             meta: true,
             required: true,
-            ...meta.path,
+            ...metaPath,
           };
           collection.fields = [metaField, ...(collection.fields || [])];
         }
@@ -458,6 +459,17 @@ export async function detectProxyServer(localBackend?: boolean | CmsLocalBackend
       ? defaultUrl
       : localBackend.url || defaultUrl.replace('localhost', location.hostname);
 
+  try {
+    const { protocol } = new URL(proxyUrl);
+    if (protocol !== 'http:' && protocol !== 'https:') {
+      console.log(`Decap CMS local_backend url must use http or https, ignoring '${proxyUrl}'`);
+      return {};
+    }
+  } catch {
+    console.log(`Decap CMS local_backend url '${proxyUrl}' is not a valid URL`);
+    return {};
+  }
+
   try {
     console.log(`Looking for Decap CMS Proxy Server at '${proxyUrl}'`);
     const res = await fetch(`${proxyUrl}`, {

package/src/actions/entries.ts

@@ -1,9 +1,14 @@
-import { fromJS, List, Map } from 'immutable';
+import { fromJS, List, Map, Set } from 'immutable';
 import isEqual from 'lodash/isEqual';
 import { Cursor } from 'decap-cms-lib-util';
 
 import { selectCollectionEntriesCursor } from '../reducers/cursors';
-import { selectFields, updateFieldByKey, selectDefaultSortField } from '../reducers/collections';
+import {
+  selectFields,
+  selectField,
+  updateFieldByKey,
+  selectDefaultSortField,
+} from '../reducers/collections';
 import { selectIntegration, selectPublishedSlugs } from '../reducers';
 import { getIntegrationProvider } from '../integrations';
 import { currentBackend } from '../backend';
@@ -38,7 +43,6 @@ import type {
 import type { EntryValue } from '../valueObjects/Entry';
 import type { Backend } from '../backend';
 import type AssetProxy from '../valueObjects/AssetProxy';
-import type { Set } from 'immutable';
 
 /*
  * Constant Declarations
@@ -740,10 +744,21 @@ function getMetaFields(fields: EntryFields) {
 export function createEmptyDraft(collection: Collection, search: string) {
   return async (dispatch: ThunkDispatch<State, {}, AnyAction>, getState: () => State) => {
     const params = new URLSearchParams(search);
-    params.forEach((value, key) => {
-      collection = updateFieldByKey(collection, key, field =>
-        field.set('default', processValue(value)),
-      );
+    const uniqueKeys = Set([...params.keys()]).toArray();
+
+    uniqueKeys.forEach(key => {
+      const field = selectField(collection, key);
+      const isMultiple = field?.get('multiple', false);
+      const values = params.getAll(key);
+
+      collection = updateFieldByKey(collection, key, field => {
+        if (isMultiple) {
+          const allValues = values.flatMap(v => v.split(',')).map(processValue);
+          return field.set('default', List(allValues));
+        } else {
+          return field.set('default', processValue(values[values.length - 1]));
+        }
+      });
     });
 
     const fields = collection.get('fields', List());

package/src/backend.ts

@@ -1184,6 +1184,7 @@ export class Backend {
     );
 
     const collectionName = collection.get('name');
+    const hasSubfolders = collection.get('nested')?.get('subfolders') !== false;
 
     const updatedOptions = { unpublished, status };
     const opts = {
@@ -1191,6 +1192,7 @@ export class Backend {
       commitMessage,
       collectionName,
       useWorkflow,
+      hasSubfolders,
       ...updatedOptions,
     };
 

package/src/components/App/App.js

@@ -156,6 +156,7 @@ class App extends React.Component {
       openMediaLibrary,
       t,
       showMediaButton,
+      location,
     } = this.props;
 
     if (config === null) {
@@ -177,22 +178,30 @@ class App extends React.Component {
     const defaultPath = getDefaultPath(collections);
     const hasWorkflow = publishMode === EDITORIAL_WORKFLOW;
 
+    // Work out if this is an editor route, following the same URL matching as the router.
+    // - /collections/:name/entries/*
+    // - /collections/:name/new
+    const [, base, , view] = location.pathname.split('/');
+    const isEditorRoute = base === 'collections' && (view === 'entries' || view === 'new');
+
     return (
       <>
         <Notifications />
-        <Header
-          user={user}
-          collections={collections}
-          onCreateEntryClick={createNewEntry}
-          onLogoutClick={logoutUser}
-          openMediaLibrary={openMediaLibrary}
-          hasWorkflow={hasWorkflow}
-          displayUrl={config.display_url}
-          logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
-          logo={config.logo}
-          isTestRepo={config.backend.name === 'test-repo'}
-          showMediaButton={showMediaButton}
-        />
+        {!isEditorRoute && (
+          <Header
+            user={user}
+            collections={collections}
+            onCreateEntryClick={createNewEntry}
+            onLogoutClick={logoutUser}
+            openMediaLibrary={openMediaLibrary}
+            hasWorkflow={hasWorkflow}
+            displayUrl={config.display_url}
+            logoUrl={config.logo_url} // Deprecated, replaced by `logo.src`
+            logo={config.logo}
+            isTestRepo={config.backend.name === 'test-repo'}
+            showMediaButton={showMediaButton}
+          />
+        )}
         <AppMainContainer>
           {isFetching && <TopBarProgress />}
           <Switch>

package/src/components/App/Header.js

@@ -11,7 +11,6 @@ import {
   DropdownItem,
   StyledDropdownButton,
   colors,
-  lengths,
   shadows,
   buttons,
   zIndex,
@@ -32,12 +31,14 @@ function AppHeader(props) {
     <header
       css={css`
         ${shadows.dropMain};
-        position: sticky;
         width: 100%;
-        top: 0;
         background-color: ${colors.foreground};
         z-index: ${zIndex.zIndex300};
-        height: ${lengths.topBarHeight};
+
+        @media (min-height: 500px) {
+          position: sticky;
+          top: 0;
+        }
       `}
       {...props}
     />
@@ -46,11 +47,15 @@ function AppHeader(props) {
 
 const AppHeaderContent = styled.div`
   display: flex;
-  justify-content: space-between;
-  min-width: 800px;
-  max-width: 1440px;
+  flex-direction: column-reverse;
   padding: 0 12px;
   margin: 0 auto;
+
+  @media (min-width: 800px) {
+    max-width: 1440px;
+    flex-direction: row;
+    justify-content: space-between;
+  }
 `;
 
 const AppHeaderButton = styled.button`
@@ -58,14 +63,27 @@ const AppHeaderButton = styled.button`
   background: none;
   color: #7b8290;
   font-family: inherit;
-  font-size: 16px;
+  font-size: 13px;
+  line-height: 1;
   font-weight: 500;
   display: inline-flex;
-  padding: 16px 20px;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0 10px 10px;
   align-items: center;
+  text-align: center;
+
+  @media (min-width: 400px) {
+    flex-direction: row;
+    gap: 4px;
+  }
+
+  @media (min-width: 500px) {
+    font-size: 16px;
+    padding: 16px 20px;
+  }
 
   ${Icon} {
-    margin-right: 4px;
     color: #b3b9c4;
   }
 
@@ -93,14 +111,16 @@ const AppHeaderButton = styled.button`
 const AppHeaderNavLink = AppHeaderButton.withComponent(NavLink);
 
 const AppHeaderActions = styled.div`
-  display: inline-flex;
+  display: flex;
   align-items: center;
+  justify-content: space-between;
 `;
 
 const AppHeaderQuickNewButton = styled(StyledDropdownButton)`
   ${buttons.button};
   ${buttons.medium};
   ${buttons.gray};
+  white-space: nowrap;
   margin-right: 8px;
 
   &:after {
@@ -112,6 +132,11 @@ const AppHeaderNavList = styled.ul`
   display: flex;
   margin: 0;
   list-style: none;
+  justify-content: space-around;
+
+  @media (min-width: 800px) {
+    justify-content: flex-start;
+  }
 `;
 
 const AppHeaderLogo = styled.li`

package/src/components/Collection/Entries/EntryCard.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
@@ -86,7 +86,7 @@ const CardBody = styled.div`
   }
 `;
 
-const CardImage = styled.div`
+const StyledImage = styled.div`
   background-image: url(${props => props.src});
   background-position: center center;
   background-size: cover;
@@ -131,6 +131,16 @@ const WorkflowBadge = styled.span`
   }};
 `;
 
+function CardImage({ getAsset, value, field }) {
+  const [asset, setAsset] = useState(null);
+
+  useEffect(() => {
+    setAsset(value ? getAsset(value, field) : null);
+  }, [value, field, getAsset]);
+
+  return asset ? <StyledImage src={asset.toString()} /> : null;
+}
+
 function EntryCard({
   path,
   summary,
@@ -192,7 +202,7 @@ function EntryCard({
               </TitleIcons>
             </CardHeading>
           </CardBody>
-          {image ? <CardImage src={getAsset(image, imageField).toString()} /> : null}
+          {image ? <CardImage getAsset={getAsset} value={image} field={imageField} /> : null}
         </GridCardLink>
       </GridCard>
     );

package/src/components/Collection/NestedCollection.js

@@ -67,18 +67,25 @@ const TreeNavLink = styled(NavLink)`
   `};
 `;
 
-function getNodeTitle(node) {
-  const title = node.isRoot
-    ? node.title
-    : node.children.find(c => !c.isDir && c.title)?.title || node.title;
-  return title;
+function getNodeTitle(node, collection) {
+  // Backward compatibility: when `nested.subfolders` is true(default) or undefined,
+  // directory nodes should use the title of their index entry.
+  // Otherwise, use the folder name already stored in `node.title`.
+  const subfolders = collection.getIn(['nested', 'subfolders']) !== false;
+  if (!node.isRoot && node.isDir && subfolders) {
+    const indexChild = node.children.find(child => !child.isDir);
+    if (indexChild && indexChild.title) {
+      return indexChild.title;
+    }
+  }
+  return node.title;
 }
 
 function TreeNode(props) {
   const { collection, treeData, depth = 0, onToggle } = props;
   const collectionName = collection.get('name');
 
-  const sortedData = sortBy(treeData, getNodeTitle);
+  const sortedData = sortBy(treeData, node => getNodeTitle(node, collection));
   const subfolders = collection.get('nested')?.get('subfolders') !== false;
   return sortedData.map(node => {
     const leaf =
@@ -93,7 +100,7 @@ function TreeNode(props) {
     if (depth > 0) {
       to = `${to}/filter${node.path}`;
     }
-    const title = getNodeTitle(node);
+    const title = getNodeTitle(node, collection);
 
     const hasChildren =
       depth === 0 ||

package/src/components/Collection/__tests__/NestedCollection.spec.js

@@ -38,7 +38,7 @@ describe('NestedCollection', () => {
     folder: 'src/pages',
     fields: [{ name: 'title', widget: 'string' }],
     nested: {
-      subfolders: false,
+      subfolders: true,
     },
   });
 

package/src/components/Collection/__tests__/__snapshots__/NestedCollection.spec.js.snap

@@ -138,20 +138,6 @@ exports[`NestedCollection should render connected component 1`] = `
   margin-right: 4px;
 }
 
-.emotion-6 {
-  position: relative;
-  top: 2px;
-  color: #fff;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-radius: 2px;
-  border-left: 6px solid currentColor;
-  border-right: 0;
-  color: currentColor;
-  left: 2px;
-}
-
 <a
     class="emotion-0 emotion-1"
     data-testid="/a"
@@ -169,9 +155,6 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 1
       </div>
-      <div
-        class="emotion-6 emotion-7"
-      />
     </div>
   </a>
   .emotion-0 {
@@ -224,20 +207,6 @@ exports[`NestedCollection should render connected component 1`] = `
   margin-right: 4px;
 }
 
-.emotion-6 {
-  position: relative;
-  top: 2px;
-  color: #fff;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-radius: 2px;
-  border-left: 6px solid currentColor;
-  border-right: 0;
-  color: currentColor;
-  left: 2px;
-}
-
 <a
     class="emotion-0 emotion-1"
     data-testid="/b"
@@ -255,9 +224,6 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 2
       </div>
-      <div
-        class="emotion-6 emotion-7"
-      />
     </div>
   </a>
 </DocumentFragment>
@@ -401,20 +367,6 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   margin-right: 4px;
 }
 
-.emotion-6 {
-  position: relative;
-  top: 2px;
-  color: #fff;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-radius: 2px;
-  border-left: 6px solid currentColor;
-  border-right: 0;
-  color: currentColor;
-  left: 2px;
-}
-
 <a
     class="emotion-0 emotion-1"
     data-testid="/a"
@@ -432,9 +384,6 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
       >
         File 1
       </div>
-      <div
-        class="emotion-6 emotion-7"
-      />
     </div>
   </a>
   .emotion-0 {
@@ -487,20 +436,6 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
   margin-right: 4px;
 }
 
-.emotion-6 {
-  position: relative;
-  top: 2px;
-  color: #fff;
-  width: 0;
-  height: 0;
-  border: 5px solid transparent;
-  border-radius: 2px;
-  border-left: 6px solid currentColor;
-  border-right: 0;
-  color: currentColor;
-  left: 2px;
-}
-
 <a
     class="emotion-0 emotion-1"
     data-testid="/b"
@@ -518,9 +453,6 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
       >
         File 2
       </div>
-      <div
-        class="emotion-6 emotion-7"
-      />
     </div>
   </a>
 </DocumentFragment>

package/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -224,17 +224,18 @@ export class PreviewPane extends React.Component {
    * This function exists entirely to expose collections from outside of this entry
    *
    */
-  getCollection = async (collectionName, slug) => {
+  getCollection = async (collectionName, slugToLoad) => {
     const { state } = this.props;
     const selectedCollection = state.collections.get(collectionName);
 
-    if (typeof slug === 'undefined') {
+    if (typeof slugToLoad === 'undefined') {
       const entries = await getAllEntries(state, selectedCollection);
-      return entries.map(entry => Map().set('data', entry.data));
+
+      return entries.map(({ data, slug, path }) => Map({ data, slug, path }));
     }
 
-    const entry = await tryLoadEntry(state, selectedCollection, slug);
-    return Map().set('data', entry.data);
+    const { data, slug, path } = await tryLoadEntry(state, selectedCollection, slugToLoad);
+    return Map({ data, slug, path });
   };
 
   render() {