feat: field based media/public folders (#3208)

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -49,6 +49,38 @@ const createSlateValue = (rawValue, { voidCodeBlock }) => {
   return Value.create({ document });
 };
 
+export const mergeMediaConfig = (editorComponents, field) => {
+  // merge editor media library config to image components
+  if (editorComponents.has('image')) {
+    const imageComponent = editorComponents.get('image');
+    const fields = imageComponent?.fields;
+
+    if (fields) {
+      imageComponent.fields = fields.update(
+        fields.findIndex(f => f.get('widget') === 'image'),
+        f => {
+          // merge `media_library` config
+          if (field.has('media_library')) {
+            f = f.set(
+              'media_library',
+              field.get('media_library').mergeDeep(f.get('media_library')),
+            );
+          }
+          // merge 'media_folder'
+          if (field.has('media_folder') && !f.has('media_folder')) {
+            f = f.set('media_folder', field.get('media_folder'));
+          }
+          // merge 'public_folder'
+          if (field.has('public_folder') && !f.has('public_folder')) {
+            f = f.set('public_folder', field.get('public_folder'));
+          }
+          return f;
+        },
+      );
+    }
+  }
+};
+
 export default class Editor extends React.Component {
   constructor(props) {
     super(props);
@@ -59,6 +91,8 @@ export default class Editor extends React.Component {
       this.codeBlockComponent || editorComponents.has('code-block')
         ? editorComponents
         : editorComponents.set('code-block', { label: 'Code Block', type: 'code-block' });
+
+    mergeMediaConfig(this.editorComponents, this.props.field);
     this.renderBlock = renderBlock({
       classNameWrapper: props.className,
       resolveWidget: props.resolveWidget,

packages/netlify-cms-widget-markdown/src/MarkdownControl/__tests__/VisualEditor.spec.js

@@ -0,0 +1,55 @@
+import { Map, fromJS } from 'immutable';
+import { mergeMediaConfig } from '../VisualEditor';
+
+describe('VisualEditor', () => {
+  describe('mergeMediaConfig', () => {
+    it('should copy editor media settings to image component', () => {
+      const editorComponents = Map({
+        image: {
+          id: 'image',
+          label: 'Image',
+          type: 'shortcode',
+          icon: 'exclamation-triangle',
+          widget: 'object',
+          pattern: {},
+          fields: fromJS([
+            {
+              label: 'Image',
+              name: 'image',
+              widget: 'image',
+              media_library: { allow_multiple: false },
+            },
+            { label: 'Alt Text', name: 'alt' },
+            { label: 'Title', name: 'title' },
+          ]),
+        },
+      });
+
+      const field = fromJS({
+        label: 'Body',
+        name: 'body',
+        widget: 'markdown',
+        media_folder: '/{{media_folder}}/posts/images/widget/body',
+        public_folder: '{{public_folder}}/posts/images/widget/body',
+        media_library: { config: { max_file_size: 1234 } },
+      });
+
+      mergeMediaConfig(editorComponents, field);
+
+      expect(editorComponents.get('image').fields).toEqual(
+        fromJS([
+          {
+            label: 'Image',
+            name: 'image',
+            widget: 'image',
+            media_library: { allow_multiple: false, config: { max_file_size: 1234 } },
+            media_folder: '/{{media_folder}}/posts/images/widget/body',
+            public_folder: '{{public_folder}}/posts/images/widget/body',
+          },
+          { label: 'Alt Text', name: 'alt' },
+          { label: 'Title', name: 'title' },
+        ]),
+      );
+    });
+  });
+});

packages/netlify-cms-widget-markdown/src/serializers/remarkRehypeShortcodes.js

@@ -53,9 +53,9 @@ export default function remarkToRehypeShortcodes({ plugins, getAsset, resolveWid
    * Retrieve the shortcode preview component.
    */
   async function getPreview(plugin, shortcodeData) {
-    const { toPreview, widget } = plugin;
+    const { toPreview, widget, fields } = plugin;
     if (toPreview) {
-      return toPreview(shortcodeData, getAsset);
+      return toPreview(shortcodeData, getAsset, fields);
     }
     const preview = resolveWidget(widget);
     return React.createElement(preview.preview, {