Plugins

Plugins module for GeChiUI.

Installation

Install the module

npm install @gechiui/plugins --save

This package assumes that your code will run in an ES2015+ environment. If you're using an environment that has limited or no support for such language features and APIs, you should include the polyfill shipped in @gechiui/babel-preset-default in your code.

Plugins API

getPlugin

Returns a registered plugin settings.

Parameters

• name string: Plugin name.

Returns

• ?GCPlugin: Plugin setting.

getPlugins

Returns all registered plugins without a scope or for a given scope.

Parameters

• scope [string]: The scope to be used when rendering inside a plugin area. No scope by default.

Returns

• GCPlugin[]: The list of plugins without a scope or for a given scope.

PluginArea

A component that renders all plugin fills in a hidden div.

Usage

// Using ES5 syntax
var el = gc.element.createElement;
var PluginArea = gc.plugins.PluginArea;

function Layout() {
	return el( 'div', { scope: 'my-page' }, 'Content of the page', PluginArea );
}

// Using ESNext syntax
import { PluginArea } from '@gechiui/plugins';

const Layout = () => (
	<div>
		Content of the page
		<PluginArea scope="my-page" />
	</div>
);

Returns

• GCComponent: The component to be rendered.

registerPlugin

Registers a plugin to the editor.

Usage

// Using ES5 syntax
var el = gc.element.createElement;
var Fragment = gc.element.Fragment;
var PluginSidebar = gc.editPost.PluginSidebar;
var PluginSidebarMoreMenuItem = gc.editPost.PluginSidebarMoreMenuItem;
var registerPlugin = gc.plugins.registerPlugin;
var moreIcon = gc.element.createElement( 'svg' ); //... svg element.

function Component() {
	return el(
		Fragment,
		{},
		el(
			PluginSidebarMoreMenuItem,
			{
				target: 'sidebar-name',
			},
			'My Sidebar'
		),
		el(
			PluginSidebar,
			{
				name: 'sidebar-name',
				title: 'My Sidebar',
			},
			'Content of the sidebar'
		)
	);
}
registerPlugin( 'plugin-name', {
	icon: moreIcon,
	render: Component,
	scope: 'my-page',
} );

// Using ESNext syntax
import { PluginSidebar, PluginSidebarMoreMenuItem } from '@gechiui/edit-post';
import { registerPlugin } from '@gechiui/plugins';
import { more } from '@gechiui/icons';

const Component = () => (
	<>
		<PluginSidebarMoreMenuItem target="sidebar-name">
			My Sidebar
		</PluginSidebarMoreMenuItem>
		<PluginSidebar name="sidebar-name" title="My Sidebar">
			Content of the sidebar
		</PluginSidebar>
	</>
);

registerPlugin( 'plugin-name', {
	icon: more,
	render: Component,
	scope: 'my-page',
} );

Parameters

• name string: A string identifying the plugin.Must be unique across all registered plugins.
• settings GCPlugin: The settings for this plugin.

Returns

• GCPlugin: The final plugin settings object.

unregisterPlugin

Unregisters a plugin by name.

Usage

// Using ES5 syntax
var unregisterPlugin = gc.plugins.unregisterPlugin;

unregisterPlugin( 'plugin-name' );

// Using ESNext syntax
import { unregisterPlugin } from '@gechiui/plugins';

unregisterPlugin( 'plugin-name' );

Parameters

• name string: Plugin name.

Returns

• ?GCPlugin: The previous plugin settings object, if it has been successfully unregistered; otherwise undefined.

withPluginContext

A Higher Order Component used to inject Plugin context to the wrapped component.

Parameters

• mapContextToProps Function: Function called on every context change, expected to return object of props to merge with the component's own props.

Returns

• GCComponent: Enhanced component with injected context as props.