createPluginMaterialUi

With @marty-editor/create-plugin-materialui its easy to create new plugins with custom properties.
It uses uniforms to create the form based on a JSONSchema you provide and will show it in a bottomToolbar similar to the other plugins.

Notice: It is in active development and its api might change, but we would love to get your feedback about it!

_It will only load the form-libraries, if the Editor is in edit mode (See section in the readme about lazy load)! So don't worry about bundle size!_

Example

``
import { createContentPlugin } from '@marty-editor/create-plugin-materialui';
import React from 'react';

const yourCustomPlugin = createContentPlugin({
Renderer: ({ state }) => (



),
name: 'custom-content-plugin',
text: 'Custom content plugin',
description: 'Some custom content plugin',
version: '0.0.1',
// see uniforms for more information on these schemas
schema: {
properties: {
firstName: { type: 'string' },
lastName: { type: 'string' },
age: {
description: 'Age in years',
type: 'integer',
minimum: 0,
},
},
required: ['firstName', 'lastName'],
},
});
`

Custom form control fields

If you have a property that is more complicated like e.g. an ImageUploadField,
you can pass your components to the schema, see this section on uniforms: https://uniforms.tools/docs/tutorials-creating-custom-field

Make sure that you lazy-load your custom components:

`
import { lazyLoad } from "@marty-editor/core"

const MyCustomImageUploadField = lazyLoad(() => import("./path/to/MyCustomImageUploadField));

const yourCustomPlugin = createContentPlugin({
schema: {
properties: {
pictureUrl: {
type: 'string',
uniforms: {
component: MyCustomImageUploadField
}
}
},
},
});
`

If you don't lazy load your form components, you might increase your bundle size.

create layout plugins

its also possible to create layout plugins:

`
import { createLayoutPlugin } from '@marty-editor/create-plugin-materialui';
``