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

This commit is contained in:
Erez Rokah
2020-02-10 18:05:47 +02:00
committed by GitHub
parent ee7445d49d
commit 97bc0c8dc4
30 changed files with 738 additions and 127 deletions

View File

@ -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,

View File

@ -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' },
]),
);
});
});
});

View File

@ -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, {