How to use @react-page/plugins-slate - 4 common examples

);
        resolve({ url: defaultUrl });
      }
    }, 500);
  });
};

if (
  process.env.NODE_ENV !== 'production' &&
  process.env.REACT_APP_TRACE_UPDATES
) {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

export const defaultSlate = slate(def => ({
  ...def,
  plugins: {
    ...def.plugins,
    custom: {
      custom1: customSlatePlugin,
    },
  },
}));

// if you want to use a plugin twice with a differnet config, you have to give it another name
export const reducedSlate = slate(def => ({
  ...def,
  name: def.name + '/reduced', // give it some other name
  hideInMenu: true, // don't show in insert menu, we only use it as intial children
  plugins: {
    headings: {

const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

export const defaultSlate = slate(def => ({
  ...def,
  plugins: {
    ...def.plugins,
    custom: {
      custom1: customSlatePlugin,
    },
  },
}));

// if you want to use a plugin twice with a differnet config, you have to give it another name
export const reducedSlate = slate(def => ({
  ...def,
  name: def.name + '/reduced', // give it some other name
  hideInMenu: true, // don't show in insert menu, we only use it as intial children
  plugins: {
    headings: {
      h2: def.plugins.headings.h2,
      h3: def.plugins.headings.h3,
    },
    paragraphs: def.plugins.paragraphs,
    emphasize: def.plugins.emphasize,
  },
}));
// Define which plugins we want to use.

export const plugins: Plugins = {
  content: [

);
        resolve({ url: defaultUrl });
      }
    }, 500);
  });
};

if (
  process.env.NODE_ENV !== 'production' &&
  process.env.REACT_APP_TRACE_UPDATES
) {
  const { whyDidYouUpdate } = require('why-did-you-update');
  whyDidYouUpdate(React);
}

const slatePlugin = slate(def => ({
  ...def,
  plugins: [...def.plugins, customSlatePlugin()],
}));
// Define which plugins we want to use (all of the above)
const plugins: Plugins = {
  content: [
    slatePlugin,
    spacer,
    imagePlugin({ imageUpload: fakeImageUploadService('/images/react.png') }),
    video,
    divider,
    html5video,
    customContentPlugin(),
  ],
  layout: [
    background({

import { pluginFactories } from '@react-page/plugins-slate';
import React from 'react';

export default pluginFactories.createComponentPlugin<{
  color: string;
}>({
  addHoverButton: true,
  addToolbarButton: true,
  type: 'SetColor',
  object: 'mark',
  icon: <span>Color</span>,
  Component: props =&gt; {
    return (
      <span style="{{">{props.children}</span>
    );
  },

  schema: {
    type: 'object',
    required: ['color'],