decap-cms-core 3.5.0 → 3.6.1

package/dist/esm/valueObjects/Entry.js

@@ -1,12 +1,5 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.createEntry = createEntry;
-var _isBoolean2 = _interopRequireDefault(require("lodash/isBoolean"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function createEntry(collection, slug = '', path = '', options = {}) {
+import _isBoolean from "lodash/isBoolean";
+export function createEntry(collection, slug = '', path = '', options = {}) {
   const returnObj = {
     collection,
     slug,
@@ -15,7 +8,7 @@ function createEntry(collection, slug = '', path = '', options = {}) {
     raw: options.raw || '',
     data: options.data || {},
     label: options.label || null,
-    isModification: (0, _isBoolean2.default)(options.isModification) ? options.isModification : null,
+    isModification: _isBoolean(options.isModification) ? options.isModification : null,
     mediaFiles: options.mediaFiles || [],
     author: options.author || '',
     updatedOn: options.updatedOn || '',

package/index.d.ts

@@ -310,6 +310,7 @@ declare module 'decap-cms-core' {
     publish?: boolean;
     nested?: {
       depth: number;
+      subfolders?: boolean;
     };
     meta?: { path?: { label: string; widget: string; index_file: string } };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "decap-cms-core",
   "description": "Decap CMS core application, see decap-cms package for the main distribution.",
-  "version": "3.5.0",
+  "version": "3.6.1",
   "repository": "https://github.com/decaporg/decap-cms/tree/main/packages/decap-cms-core",
   "bugs": "https://github.com/decaporg/decap-cms/issues",
   "module": "dist/esm/index.js",
@@ -26,6 +26,7 @@
   "dependencies": {
     "@iarna/toml": "2.2.5",
     "@reduxjs/toolkit": "^1.9.1",
+    "@vercel/stega": "^0.1.2",
     "ajv": "8.12.0",
     "ajv-errors": "^3.0.0",
     "ajv-keywords": "^5.0.0",
@@ -96,5 +97,5 @@
     "@types/url-join": "^4.0.0",
     "redux-mock-store": "^1.5.3"
   },
-  "gitHead": "022dbe523d07bb8bc74970460cc82b259fde4041"
+  "gitHead": "d10b9848a31ae3a7b59c3f403d839d062b1f876f"
 }

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

@@ -117,22 +117,28 @@ export class EntriesCollection extends React.Component {
   }
 }
 
-export function filterNestedEntries(path, collectionFolder, entries) {
+export function filterNestedEntries(path, collectionFolder, entries, subfolders) {
   const filtered = entries.filter(e => {
-    const entryPath = e.get('path').slice(collectionFolder.length + 1);
+    let entryPath = e.get('path').slice(collectionFolder.length + 1);
     if (!entryPath.startsWith(path)) {
       return false;
     }
 
-    // only show immediate children
+    // for subdirectories, trim off the parent folder corresponding to
+    // this nested collection entry
     if (path) {
-      // non root path
-      const trimmed = entryPath.slice(path.length + 1);
-      return trimmed.split('/').length === 2;
-    } else {
-      // root path
-      return entryPath.split('/').length <= 2;
+      entryPath = entryPath.slice(path.length + 1);
+    }
+
+    // if subfolders legacy mode is enabled, show only immediate subfolders
+    // also show index file in root folder
+    if (subfolders) {
+      const depth = entryPath.split('/').length;
+      return path ? depth === 2 : depth <= 2;
     }
+
+    // only show immediate children
+    return !entryPath.includes('/');
   });
   return filtered;
 }
@@ -146,7 +152,12 @@ function mapStateToProps(state, ownProps) {
 
   if (collection.has('nested')) {
     const collectionFolder = collection.get('folder');
-    entries = filterNestedEntries(filterTerm || '', collectionFolder, entries);
+    entries = filterNestedEntries(
+      filterTerm || '',
+      collectionFolder,
+      entries,
+      collection.get('nested').get('subfolders') !== false,
+    );
   }
   const entriesLoaded = selectEntriesLoaded(state.entries, collection.get('name'));
   const isFetching = selectIsFetching(state.entries, collection.get('name'));

package/src/components/Collection/Entries/__tests__/EntriesCollection.spec.js

@@ -45,11 +45,11 @@ describe('filterNestedEntries', () => {
     ];
     const entries = fromJS(entriesArray);
     expect(filterNestedEntries('dir3', 'src/pages', entries).toJS()).toEqual([
-      { slug: 'dir3/dir4/index', path: 'src/pages/dir3/dir4/index.md', data: { title: 'File 4' } },
+      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
     ]);
   });
 
-  it('should return immediate children and root for root path', () => {
+  it('should return only immediate children for root path', () => {
     const entriesArray = [
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
       { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
@@ -60,8 +60,6 @@ describe('filterNestedEntries', () => {
     const entries = fromJS(entriesArray);
     expect(filterNestedEntries('', 'src/pages', entries).toJS()).toEqual([
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
-      { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
-      { slug: 'dir3/index', path: 'src/pages/dir3/index.md', data: { title: 'File 3' } },
     ]);
   });
 });
@@ -117,7 +115,9 @@ describe('EntriesCollection', () => {
     });
 
     const { asFragment } = renderWithRedux(
-      <ConnectedEntriesCollection collection={collection.set('nested', fromJS({ depth: 10 }))} />,
+      <ConnectedEntriesCollection
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
+      />,
       {
         store,
       },
@@ -126,7 +126,7 @@ describe('EntriesCollection', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should render apply filter term for nested collections', () => {
+  it('should render with applied filter term for nested collections', () => {
     const entriesArray = [
       { slug: 'index', path: 'src/pages/index.md', data: { title: 'Root' } },
       { slug: 'dir1/index', path: 'src/pages/dir1/index.md', data: { title: 'File 1' } },
@@ -142,7 +142,7 @@ describe('EntriesCollection', () => {
 
     const { asFragment } = renderWithRedux(
       <ConnectedEntriesCollection
-        collection={collection.set('nested', fromJS({ depth: 10 }))}
+        collection={collection.set('nested', fromJS({ depth: 10, subfolders: false }))}
         filterTerm="dir3/dir4"
       />,
       {

package/src/components/Collection/Entries/__tests__/__snapshots__/EntriesCollection.spec.js.snap

@@ -1,36 +1,36 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EntriesCollection should render apply filter term for nested collections 1`] = `
+exports[`EntriesCollection should render connected component 1`] = `
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\" }"
     cursor="[object Object]"
-    entries="List []"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir2/index\\", \\"path\\": \\"src/pages/dir2/index.md\\", \\"data\\": Map { \\"title\\": \\"File 2\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>
 `;
 
-exports[`EntriesCollection should render connected component 1`] = `
+exports[`EntriesCollection should render show only immediate children for nested collection 1`] = `
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\" }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
     cursor="[object Object]"
-    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir2/index\\", \\"path\\": \\"src/pages/dir2/index.md\\", \\"data\\": Map { \\"title\\": \\"File 2\\" } } ]"
+    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>
 `;
 
-exports[`EntriesCollection should render show only immediate children for nested collection 1`] = `
+exports[`EntriesCollection should render with applied filter term for nested collections 1`] = `
 <DocumentFragment>
   <mock-entries
     collectionname="Pages"
-    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10 } }"
+    collections="Map { \\"name\\": \\"pages\\", \\"label\\": \\"Pages\\", \\"folder\\": \\"src/pages\\", \\"nested\\": Map { \\"depth\\": 10, \\"subfolders\\": false } }"
     cursor="[object Object]"
-    entries="List [ Map { \\"slug\\": \\"index\\", \\"path\\": \\"src/pages/index.md\\", \\"data\\": Map { \\"title\\": \\"Root\\" } }, Map { \\"slug\\": \\"dir1/index\\", \\"path\\": \\"src/pages/dir1/index.md\\", \\"data\\": Map { \\"title\\": \\"File 1\\" } }, Map { \\"slug\\": \\"dir3/index\\", \\"path\\": \\"src/pages/dir3/index.md\\", \\"data\\": Map { \\"title\\": \\"File 3\\" } } ]"
+    entries="List [ Map { \\"slug\\": \\"dir3/dir4/index\\", \\"path\\": \\"src/pages/dir3/dir4/index.md\\", \\"data\\": Map { \\"title\\": \\"File 4\\" } } ]"
     isfetching="false"
   />
 </DocumentFragment>

package/src/components/Collection/NestedCollection.js

@@ -79,8 +79,13 @@ function TreeNode(props) {
   const collectionName = collection.get('name');
 
   const sortedData = sortBy(treeData, getNodeTitle);
+  const subfolders = collection.get('nested')?.get('subfolders') !== false;
   return sortedData.map(node => {
-    const leaf = node.children.length <= 1 && !node.children[0]?.isDir && depth > 0;
+    const leaf =
+      depth > 0 &&
+      (subfolders
+        ? node.children.length <= 1 && !node.children[0]?.isDir
+        : node.children.length === 0);
     if (leaf) {
       return null;
     }
@@ -90,7 +95,11 @@ function TreeNode(props) {
     }
     const title = getNodeTitle(node);
 
-    const hasChildren = depth === 0 || node.children.some(c => c.children.some(c => c.isDir));
+    const hasChildren =
+      depth === 0 ||
+      (subfolders
+        ? node.children.some(c => c.children.some(c => c.isDir))
+        : node.children.some(c => c.isDir));
 
     return (
       <React.Fragment key={node.path}>

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

@@ -37,6 +37,9 @@ describe('NestedCollection', () => {
     label: 'Pages',
     folder: 'src/pages',
     fields: [{ name: 'title', widget: 'string' }],
+    nested: {
+      subfolders: false,
+    },
   });
 
   it('should render correctly with no entries', () => {

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

@@ -138,6 +138,20 @@ 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"
@@ -155,6 +169,9 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 1
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
   .emotion-0 {
@@ -207,6 +224,20 @@ 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"
@@ -224,6 +255,9 @@ exports[`NestedCollection should render connected component 1`] = `
       >
         File 2
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
 </DocumentFragment>
@@ -367,6 +401,20 @@ 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"
@@ -384,6 +432,9 @@ exports[`NestedCollection should render correctly with nested entries 1`] = `
       >
         File 1
       </div>
+      <div
+        class="emotion-6 emotion-7"
+      />
     </div>
   </a>
   .emotion-0 {
@@ -436,6 +487,20 @@ 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"
@@ -453,6 +518,9 @@ 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/EditorControlPane/EditorControl.js

@@ -139,7 +139,6 @@ class EditorControl extends React.Component {
     removeInsertedMedia: PropTypes.func.isRequired,
     persistMedia: PropTypes.func.isRequired,
     onValidate: PropTypes.func,
-    processControlRef: PropTypes.func,
     controlRef: PropTypes.func,
     query: PropTypes.func.isRequired,
     queryHits: PropTypes.object,
@@ -201,7 +200,6 @@ class EditorControl extends React.Component {
       removeInsertedMedia,
       persistMedia,
       onValidate,
-      processControlRef,
       controlRef,
       query,
       queryHits,
@@ -329,7 +327,6 @@ class EditorControl extends React.Component {
               resolveWidget={resolveWidget}
               widget={widget}
               getEditorComponents={getEditorComponents}
-              ref={processControlRef && partial(processControlRef, field)}
               controlRef={controlRef}
               editorControl={ConnectedEditorControl}
               query={query}

package/src/components/Editor/EditorControlPane/EditorControlPane.js

@@ -99,15 +99,17 @@ export default class ControlPane extends React.Component {
     selectedLocale: this.props.locale,
   };
 
-  componentValidate = {};
+  childRefs = {};
 
-  controlRef(field, wrappedControl) {
+  controlRef = (field, wrappedControl) => {
     if (!wrappedControl) return;
     const name = field.get('name');
+    this.childRefs[name] = wrappedControl;
+  };
 
-    this.componentValidate[name] =
-      wrappedControl.innerWrappedControl?.validate || wrappedControl.validate;
-  }
+  getControlRef = field => wrappedControl => {
+    this.controlRef(field, wrappedControl);
+  };
 
   handleLocaleChange = val => {
     this.setState({ selectedLocale: val });
@@ -152,7 +154,11 @@ export default class ControlPane extends React.Component {
   validate = async () => {
     this.props.fields.forEach(field => {
       if (field.get('widget') === 'hidden') return;
-      this.componentValidate[field.get('name')]();
+      const control = this.childRefs[field.get('name')];
+      const validateFn = control?.innerWrappedControl?.validate ?? control?.validate;
+      if (validateFn) {
+        validateFn();
+      }
     });
   };
 
@@ -165,6 +171,14 @@ export default class ControlPane extends React.Component {
     }
   };
 
+  focus(path) {
+    const [fieldName, ...remainingPath] = path.split('.');
+    const control = this.childRefs[fieldName];
+    if (control?.focus) {
+      control.focus(remainingPath.join('.'));
+    }
+  }
+
   render() {
     const { collection, entry, fields, fieldsMetaData, fieldsErrors, onChange, onValidate, t } =
       this.props;
@@ -227,8 +241,7 @@ export default class ControlPane extends React.Component {
                   onChange(field, newValue, newMetadata, i18n);
                 }}
                 onValidate={onValidate}
-                processControlRef={this.controlRef.bind(this)}
-                controlRef={this.controlRef}
+                controlRef={this.getControlRef(field)}
                 entry={entry}
                 collection={collection}
                 isDisabled={isDuplicate}

package/src/components/Editor/EditorControlPane/Widget.js

@@ -44,6 +44,7 @@ export default class Widget extends Component {
     fieldsErrors: ImmutablePropTypes.map,
     onChange: PropTypes.func.isRequired,
     onValidate: PropTypes.func,
+    controlRef: PropTypes.func,
     onOpenMediaLibrary: PropTypes.func.isRequired,
     onClearMediaControl: PropTypes.func.isRequired,
     onRemoveMediaControl: PropTypes.func.isRequired,
@@ -55,7 +56,6 @@ export default class Widget extends Component {
     widget: PropTypes.object.isRequired,
     getEditorComponents: PropTypes.func.isRequired,
     isFetching: PropTypes.bool,
-    controlRef: PropTypes.func,
     query: PropTypes.func.isRequired,
     clearSearch: PropTypes.func.isRequired,
     clearFieldErrors: PropTypes.func.isRequired,
@@ -112,8 +112,29 @@ export default class Widget extends Component {
      */
     const { shouldComponentUpdate: scu } = this.innerWrappedControl;
     this.wrappedControlShouldComponentUpdate = scu && scu.bind(this.innerWrappedControl);
+
+    // Call the control ref if provided, passing this Widget instance
+    if (this.props.controlRef) {
+      this.props.controlRef(this);
+    }
   };
 
+  focus(path) {
+    // Try widget's custom focus method first
+    if (this.innerWrappedControl?.focus) {
+      this.innerWrappedControl.focus(path);
+    } else {
+      // Fall back to focusing by ID for simple widgets
+      const element = document.getElementById(this.props.uniqueFieldId);
+      element?.focus();
+    }
+    // After focusing, ensure the element is visible
+    const label = document.querySelector(`label[for="${this.props.uniqueFieldId}"]`);
+    if (label) {
+      label.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
+    }
+  }
+
   getValidateValue = () => {
     let value = this.innerWrappedControl?.getValidateValue?.() || this.props.value;
     // Convert list input widget value to string for validation test

package/src/components/Editor/EditorInterface.js

@@ -162,6 +162,10 @@ class EditorInterface extends Component {
     i18nVisible: localStorage.getItem(I18N_VISIBLE) !== 'false',
   };
 
+  handleFieldClick = path => {
+    this.controlPaneRef?.focus(path);
+  };
+
   handleSplitPaneDragStart = () => {
     this.setState({ showEventBlocker: true });
   };
@@ -298,6 +302,7 @@ class EditorInterface extends Component {
                 fields={fields}
                 fieldsMetaData={fieldsMetaData}
                 locale={leftPanelLocale}
+                onFieldClick={this.handleFieldClick}
               />
             </PreviewPaneContainer>
           </StyledSplitPane>
@@ -381,7 +386,7 @@ class EditorInterface extends Component {
                 title={t('editor.editorInterface.togglePreview')}
               />
             )}
-            {scrollSyncVisible && (
+            {scrollSyncVisible && !collection.getIn(['editor', 'visualEditing']) && (
               <EditorToggle
                 isActive={scrollSyncEnabled}
                 onClick={this.handleToggleScrollSync}

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

@@ -3,24 +3,63 @@ import React from 'react';
 import { isElement } from 'react-is';
 import { ScrollSyncPane } from 'react-scroll-sync';
 import { FrameContextConsumer } from 'react-frame-component';
+import { vercelStegaDecode } from '@vercel/stega';
 
 /**
- * We need to create a lightweight component here so that we can access the
- * context within the Frame. This allows us to attach the ScrollSyncPane to the
- * body.
+ * PreviewContent renders the preview component and optionally handles visual editing interactions.
+ * By default it uses scroll sync, but can be configured to use visual editing instead.
  */
 class PreviewContent extends React.Component {
-  render() {
+  handleClick = e => {
+    const { previewProps, onFieldClick } = this.props;
+    const visualEditing = previewProps?.collection?.getIn(['editor', 'visualEditing'], false);
+
+    if (!visualEditing) {
+      return;
+    }
+
+    try {
+      const text = e.target.textContent;
+      const decoded = vercelStegaDecode(text);
+      if (decoded?.decap) {
+        if (onFieldClick) {
+          onFieldClick(decoded.decap);
+        }
+      }
+    } catch (err) {
+      console.log('Visual editing error:', err);
+    }
+  };
+
+  renderPreview() {
     const { previewComponent, previewProps } = this.props;
+    return (
+      <div onClick={this.handleClick}>
+        {isElement(previewComponent)
+          ? React.cloneElement(previewComponent, previewProps)
+          : React.createElement(previewComponent, previewProps)}
+      </div>
+    );
+  }
+
+  render() {
+    const { previewProps } = this.props;
+    const visualEditing = previewProps?.collection?.getIn(['editor', 'visualEditing'], false);
+    const showScrollSync = !visualEditing;
+
     return (
       <FrameContextConsumer>
-        {context => (
-          <ScrollSyncPane attachTo={context.document.scrollingElement}>
-            {isElement(previewComponent)
-              ? React.cloneElement(previewComponent, previewProps)
-              : React.createElement(previewComponent, previewProps)}
-          </ScrollSyncPane>
-        )}
+        {context => {
+          const preview = this.renderPreview();
+          if (showScrollSync) {
+            return (
+              <ScrollSyncPane attachTo={context.document.scrollingElement}>
+                {preview}
+              </ScrollSyncPane>
+            );
+          }
+          return preview;
+        }}
       </FrameContextConsumer>
     );
   }
@@ -29,6 +68,7 @@ class PreviewContent extends React.Component {
 PreviewContent.propTypes = {
   previewComponent: PropTypes.func.isRequired,
   previewProps: PropTypes.object,
+  onFieldClick: PropTypes.func,
 };
 
 export default PreviewContent;