feat: field based media/public folders (#3208)
This commit is contained in:
@ -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,
|
||||
|
@ -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' },
|
||||
]),
|
||||
);
|
||||
});
|
||||
});
|
||||
});
|
@ -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, {
|
||||
|
Reference in New Issue
Block a user