Merge branch 'widget-richtext' into moc

Author: martinjagodic

.eslintrc.js

@@ -70,6 +70,7 @@ module.exports = {
       node: {
         extensions: ['.js', '.jsx', '.ts', '.tsx'],
       },
+      exports: {},
     },
     'import/core-modules': [...packages, 'decap-cms-app/dist/esm'],
   },

dev-test/config.yml

@@ -131,7 +131,10 @@
           h('p', {},
             h('small', {}, "Written " + entry.getIn(['data', 'date']))
           ),
-          h('div', {"className": "text"}, this.props.widgetFor('body'))
+          h('h2', {}, "Richtext Widget"),
+          h('div', {"className": "text"}, this.props.widgetFor('body')),
+          h('h2', {}, "Markdown Widget"),
+          h('div', {"className": "text"}, this.props.widgetFor('bodyold'))
         );
       }
     });
@@ -243,6 +246,39 @@
         );
       }
     });
+    CMS.registerEditorComponent({
+      id: 'container-markdown',
+      label: 'Container Markdown',
+      fields: [
+        { name: 'inner', label: 'Body', widget: 'markdown', editor_components: [] },
+      ],
+      pattern: /^{{< container-markdown >}}(.*?){{< \/container-markdown >}}/s,
+      fromBlock (match) {
+        return {
+          inner: match[1] || '',
+        }
+      },
+      toBlock (obj) {
+        return `{{< container-markdown >}}${obj.inner}{{< /container-markdown >}}`
+      },
+    })
+    CMS.registerEditorComponent({
+      id: 'container-richtext',
+      label: 'Container Richtext',
+      fields: [
+        { name: 'inner', label: 'Body', widget: 'richtext', editor_components: ['container-richtext'] },
+      ],
+      pattern: /^{{< container-richtext >}}(.*?){{< \/container-richtext >}}/s,
+      fromBlock (match) {
+        return {
+          inner: match[1] || '',
+        }
+      },
+      toBlock (obj) {
+        return `{{< container-richtext >}}${obj.inner}{{< /container-richtext >}}`
+      },
+    })
+
   </script>
 </body>
 </html>

dev-test/index.html

@@ -95,6 +95,7 @@
     "cypress-plugin-tab": "^1.0.0",
     "dotenv": "^10.0.0",
     "eslint": "^8.12.0",
+    "eslint-import-resolver-exports": "^1.0.0-beta.5",
     "eslint-plugin-cypress": "^2.6.0",
     "eslint-plugin-import": "^2.18.2",
     "eslint-plugin-prettier": "^4.0.0",

package-lock.json

@@ -18,6 +18,7 @@ import DecapCmsWidgetImage from 'decap-cms-widget-image';
 import DecapCmsWidgetFile from 'decap-cms-widget-file';
 import DecapCmsWidgetSelect from 'decap-cms-widget-select';
 import DecapCmsWidgetMarkdown from 'decap-cms-widget-markdown';
+import DecapCmsWidgetRichtext from 'decap-cms-widget-richtext';
 import DecapCmsWidgetList from 'decap-cms-widget-list';
 import DecapCmsWidgetObject from 'decap-cms-widget-object';
 import DecapCmsWidgetRelation from 'decap-cms-widget-relation';
@@ -49,6 +50,7 @@ CMS.registerWidget([
   DecapCmsWidgetFile.Widget(),
   DecapCmsWidgetSelect.Widget(),
   DecapCmsWidgetMarkdown.Widget(),
+  DecapCmsWidgetRichtext.Widget(),
   DecapCmsWidgetList.Widget(),
   DecapCmsWidgetObject.Widget(),
   DecapCmsWidgetRelation.Widget(),

package.json

@@ -517,7 +517,9 @@ export default class GitHub implements Implementation {
           });
 
           console.log(
-            `[entriesByFolder] Created cursor with actions: ${JSON.stringify(cursor.actions?.toArray())}`,
+            `[entriesByFolder] Created cursor with actions: ${JSON.stringify(
+              cursor.actions?.toArray(),
+            )}`,
           );
 
           return filtered;
@@ -540,11 +542,15 @@ export default class GitHub implements Implementation {
       });
       console.log(`[entriesByFolder] REST API returned ${files.length} files`);
       const filtered = files.filter(file => filterByExtension(file, extension));
-      console.log(`[entriesByFolder] Filtered to ${filtered.length} files with extension: ${extension}`);
+      console.log(
+        `[entriesByFolder] Filtered to ${filtered.length} files with extension: ${extension}`,
+      );
       const result = this.getCursorAndFiles(filtered, page, pageSize);
       cursor = result.cursor;
       console.log(
-        `[entriesByFolder] Created cursor with actions: ${JSON.stringify(cursor.actions?.toArray())}, returning ${result.files.length} files for page ${page}`,
+        `[entriesByFolder] Created cursor with actions: ${JSON.stringify(
+          cursor.actions?.toArray(),
+        )}, returning ${result.files.length} files for page ${page}`,
       );
       return result.files;
     };
@@ -613,7 +619,11 @@ export default class GitHub implements Implementation {
     extension: string,
     depth: number,
     pathRegex?: RegExp,
-    onProgress?: (progress: { loadedCount: number; totalCount: number; entries: ImplementationEntry[] }) => void,
+    onProgress?: (progress: {
+      loadedCount: number;
+      totalCount: number;
+      entries: ImplementationEntry[];
+    }) => void,
   ) {
     const repoURL = this.api!.originRepoURL;
 
@@ -720,7 +730,7 @@ export default class GitHub implements Implementation {
             )}%)`,
           );
         }
-        
+
         // Call progress callback with current state
         if (onProgress) {
           onProgress({

packages/decap-cms-app/src/extensions.js

@@ -237,7 +237,11 @@ export function loadEntriesPage(collection: Collection, page: number) {
 export async function getAllEntries(
   state: State,
   collection: Collection,
-  onProgress?: (progress: { loadedCount: number; totalCount: number; entries: EntryValue[] }) => void,
+  onProgress?: (progress: {
+    loadedCount: number;
+    totalCount: number;
+    entries: EntryValue[];
+  }) => void,
 ) {
   const backend = currentBackend(state.config);
   const integration = selectIntegration(state, collection.get('name'), 'listEntries');
@@ -838,19 +842,21 @@ const appendActions = fromJS({
 
 function addAppendActionsToCursor(cursor: Cursor) {
   const originalActions = cursor.actions?.toArray() || [];
-  console.log(`[addAppendActionsToCursor] Original cursor actions: ${JSON.stringify(originalActions)}`);
-  
+  console.log(
+    `[addAppendActionsToCursor] Original cursor actions: ${JSON.stringify(originalActions)}`,
+  );
+
   const updatedCursor = Cursor.create(cursor).updateStore('actions', (actions: Set<string>) => {
     return actions.union(
       appendActions
         .filter((v: Map<string, string | boolean>) => actions.has(v.get('action') as string))
         .keySeq(),
     );
   });
-  
+
   const newActions = updatedCursor.actions?.toArray() || [];
   console.log(`[addAppendActionsToCursor] Updated cursor actions: ${JSON.stringify(newActions)}`);
-  
+
   return updatedCursor;
 }
 
@@ -864,6 +870,8 @@ export function loadEntries(collection: Collection, page = 0) {
 
     // If user has already set a sort, use it
     const sortFields = selectEntriesSortFields(state.entries, collectionName);
+
+    // If user has already set a sort, use it
     if (sortFields && sortFields.length > 0) {
       const field = sortFields[0];
       return dispatch(sortByField(collection, field.get('key'), field.get('direction')));
@@ -893,11 +901,11 @@ export function loadEntries(collection: Collection, page = 0) {
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const backendConfig = state.config?.backend as any;
       const useGraphQL = backendConfig?.use_graphql === true;
-      
+
       // For GraphQL, nested collections, or i18n collections, load all entries
       // GraphQL will handle batching automatically via listFilesPaginated with progressive loading
       const loadAllEntries = isNestedCollection || isI18nCollection || useGraphQL;
-      
+
       console.log(
         `[loadEntries] ${collectionName}: isNested=${isNestedCollection}, isI18n=${isI18nCollection}, useGraphQL=${useGraphQL}, loadAllEntries=${loadAllEntries}`,
       );
@@ -956,13 +964,15 @@ export function loadEntries(collection: Collection, page = 0) {
         // so that i18n grouping works correctly (entries in different locales get grouped).
         // Use getAllEntries which calls listAllEntries that processes all entries together.
         console.log(`[loadEntries] Loading all entries for i18n collection: ${collectionName}`);
-        const allEntries = await getAllEntries(state, collection, (progress) => {
+        const allEntries = await getAllEntries(state, collection, progress => {
           // Dispatch progress update
           dispatch(entriesProgress(collection, progress.loadedCount, progress.totalCount));
-          
+
           // Show entries progressively as they load (only if not the final batch)
           if (progress.loadedCount < progress.totalCount) {
-            dispatch(entriesLoaded(collection, progress.entries, 0, Cursor.create({}), false, false));
+            dispatch(
+              entriesLoaded(collection, progress.entries, 0, Cursor.create({}), false, false),
+            );
           }
         });
         console.log(
@@ -988,13 +998,15 @@ export function loadEntries(collection: Collection, page = 0) {
         // For GraphQL collections, load ALL entries progressively in batches
         // GraphQL handles batching automatically via listFilesPaginated
         console.log(`[loadEntries] Loading all entries for GraphQL collection: ${collectionName}`);
-        const allEntries = await getAllEntries(state, collection, (progress) => {
+        const allEntries = await getAllEntries(state, collection, progress => {
           // Dispatch progress update
           dispatch(entriesProgress(collection, progress.loadedCount, progress.totalCount));
-          
+
           // Show entries progressively as they load (only if not the final batch)
           if (progress.loadedCount < progress.totalCount) {
-            dispatch(entriesLoaded(collection, progress.entries, 0, Cursor.create({}), false, false));
+            dispatch(
+              entriesLoaded(collection, progress.entries, 0, Cursor.create({}), false, false),
+            );
           }
         });
         console.log(
@@ -1097,11 +1109,15 @@ export function traverseCollectionCursor(collection: Collection, action: string)
     try {
       dispatch(entriesLoading(collection));
       console.log(
-        `[traverseCollectionCursor] Calling traverseCursor with action: ${action}, realAction: ${realAction}, cursor actions: ${JSON.stringify(cursor.actions?.toArray())}`,
+        `[traverseCollectionCursor] Calling traverseCursor with action: ${action}, realAction: ${realAction}, cursor actions: ${JSON.stringify(
+          cursor.actions?.toArray(),
+        )}`,
       );
       const { entries, cursor: newCursor } = await traverseCursor(backend, cursor, realAction);
       console.log(
-        `[traverseCollectionCursor] traverseCursor succeeded, got ${entries.length} entries, new cursor actions: ${JSON.stringify(newCursor.actions?.toArray())}`,
+        `[traverseCollectionCursor] traverseCursor succeeded, got ${
+          entries.length
+        } entries, new cursor actions: ${JSON.stringify(newCursor.actions?.toArray())}`,
       );
 
       const pagination = newCursor.meta?.get('page');

packages/decap-cms-backend-github/src/implementation.tsx

@@ -665,7 +665,11 @@ export class Backend {
   // for local searches and queries.
   async listAllEntries(
     collection: Collection,
-    onProgress?: (progress: { loadedCount: number; totalCount: number; entries: EntryValue[] }) => void,
+    onProgress?: (progress: {
+      loadedCount: number;
+      totalCount: number;
+      entries: EntryValue[];
+    }) => void,
   ) {
     if (collection.get('folder') && this.implementation.allEntriesByFolder) {
       const depth = collectionDepth(collection);
@@ -677,7 +681,7 @@ export class Backend {
           collection,
         )}`,
       );
-      
+
       // Wrap onProgress to process entries before calling callback
       const wrappedOnProgress = onProgress
         ? (progress: { loadedCount: number; totalCount: number; entries: any[] }) => {
@@ -689,9 +693,15 @@ export class Backend {
             });
           }
         : undefined;
-      
+
       return this.implementation
-        .allEntriesByFolder(folder, extension, depth, collectionRegex(collection), wrappedOnProgress)
+        .allEntriesByFolder(
+          folder,
+          extension,
+          depth,
+          collectionRegex(collection),
+          wrappedOnProgress,
+        )
         .then(entries => {
           console.log(
             `[backend.listAllEntries] allEntriesByFolder returned ${entries.length} entries`,

packages/decap-cms-core/src/actions/entries.ts

@@ -67,6 +67,7 @@ class PreviewContent extends React.Component {
 
 PreviewContent.propTypes = {
   previewComponent: PropTypes.func.isRequired,
+  getEditorComponents: PropTypes.func,
   previewProps: PropTypes.object,
   onFieldClick: PropTypes.func,
 };