feat: slate plugins can now be customized multiple times (calling it …

…with a customize function) feat: the slate plugin itself now defers the type of plugins and passes it to createInitialSlateState, makes it more easy to autocomplete your way through all plugins
react-page · Jan 6, 2020 · a4b2aa9 · a4b2aa9
1 parent cb918c6
commit a4b2aa9
Show file tree

Hide file tree

Showing 15 changed files with 225 additions and 132 deletions.
diff --git a/examples/src/customLayoutPluginWithInitialState.tsx b/examples/src/customLayoutPluginWithInitialState.tsx
@@ -27,7 +27,7 @@ export default () =>
               state: reducedSlate.createInitialSlateState(({ plugins }) => ({
                 children: [
                   {
-                    plugin: plugins.headings.h2,
+                    plugin: plugins.headings.h3,
                     children: ['Hello world'],
                   },
                   {

diff --git a/examples/src/slate.tsx b/examples/src/slate.tsx
@@ -1,11 +1,13 @@
 import slate from '@react-page/plugins-slate';
 import '@react-page/plugins-slate/lib/index.css';
+import React from 'react';
 import customSlatePlugin from './customSlatePlugin';
 
 export const defaultSlate = slate(def => ({
   ...def,
   plugins: {
     ...def.plugins,
+
     custom: {
       custom1: customSlatePlugin,
     },
@@ -20,9 +22,17 @@ export const reducedSlate = slate(def => ({
   plugins: {
     headings: {
       h2: def.plugins.headings.h2,
-      h3: def.plugins.headings.h3,
+      // you can also customize default slate plugins easily
+      h3: def.plugins.headings.h3(dh3 => {
+        const OriginalH3 = dh3.Component;
+        return {
+          ...dh3,
+          Component: props => <OriginalH3 {...props} style={{ color: 'red' }} />,
+        };
+      }),
     },
     paragraphs: def.plugins.paragraphs,
     emphasize: def.plugins.emphasize,
+    alignment: def.plugins.alignment,
   },
 }));
diff --git a/package.json b/package.json
@@ -36,17 +36,17 @@
     "postcss-nested": "^3.0.0",
     "postcss-preset-env": "^5.3.0",
     "prettier": "1.15.3",
-    "prettier-tslint": "0.4.1",
+    "prettier-tslint": "0.4.2",
     "pushstate-server": "^3.0.0",
     "q-deep": "1.0.3",
     "react": "~16.9.0",
     "react-dom": "~16.9.0",
     "redux": "^3.6.0",
     "rimraf": "2.6.2",
     "ts-jest": "^24.1.0",
-    "tslint": "^5.11.0",
+    "tslint": "^5.20.0",
     "tslint-react": "^3.6.0",
-    "typescript": "^3.6.4",
+    "typescript": "^3.7.3",
     "unexpected": "^10.38.0"
   },
   "scripts": {

diff --git a/packages/plugins/content/slate/src/index.tsx b/packages/plugins/content/slate/src/index.tsx
@@ -20,63 +20,53 @@
  *
  */
 
+import { lazyLoad } from '@react-page/core';
+import { ContentPluginConfig } from '@react-page/core/lib/service/plugin/classes';
+import { pathOr } from 'ramda/src/pathOr';
 import * as React from 'react';
-
+import { AnyAction } from 'redux';
+import { ActionTypes } from 'redux-undo';
+import { Value } from 'slate';
 import Component from './Component';
-import Renderer from './Renderer';
-
-import { SlatePluginCollection } from './types/SlatePlugin';
+import { defaultTranslations } from './default/settings';
 import * as hooks from './hooks';
-
 import v002 from './migrations/v002';
 import v003 from './migrations/v003';
-
-import { ContentPluginConfig } from '@react-page/core/lib/service/plugin/classes';
-import { SlateState } from './types/state';
-
-import { pathOr } from 'ramda/src/pathOr';
-import { ActionTypes } from 'redux-undo';
-import { AnyAction } from 'redux';
-import { defaultTranslations } from './default/settings';
-
-import * as defaultPlugins from './plugins/index';
 import * as pluginFactories from './pluginFactories/index';
+import * as defaultPlugins from './plugins/index';
+import Renderer from './Renderer';
 import serialization from './serialization';
 import { SlateProps } from './types/component';
-import { lazyLoad } from '@react-page/core';
-
-import { SlateRendererProps } from './types/renderer';
 import { SlateControlsProps } from './types/controls';
-import makeSlatePluginsFromDef from './utils/makeSlatePluginsFromDef';
 import { InitialSlateStateDef } from './types/initialSlateState';
+import { SlateRendererProps } from './types/renderer';
+import { SlatePluginCollection } from './types/SlatePlugin';
+import { SlateState } from './types/state';
+import makeSlatePluginsFromDef from './utils/makeSlatePluginsFromDef';
 import transformInitialSlateState from './utils/transformInitialSlateState';
-import { Value } from 'slate';
 
 const slatePlugins = defaultPlugins;
 export { defaultPlugins, slatePlugins, pluginFactories };
-
 const Subject = lazyLoad(() => import('@material-ui/icons/Subject'));
 const Controls = lazyLoad(() => import('./Controls/'));
 
 const migrations = [v002, v003];
-type SlateDefinition = {
+type SlateDefinition<TPlugins extends SlatePluginCollection> = {
   icon: JSX.Element;
-  plugins: SlatePluginCollection;
+  plugins: TPlugins;
   Renderer: React.ComponentType<SlateRendererProps>;
   Controls: React.ComponentType<SlateControlsProps>;
   name: string;
   version: string;
   translations: typeof defaultTranslations;
   migrations: typeof migrations;
-  createInitialSlateState: CreateInitialStateCustomizer;
   allowInlineNeighbours: boolean;
   hideInMenu?: boolean;
 };
-type DefaultSlateDefinition = SlateDefinition & {
-  plugins: typeof defaultPlugins;
-};
-export type CreateInitialStateCustomizer = (
-  { plugins }: { plugins: SlatePluginCollection }
+type DefaultPlugins = typeof defaultPlugins;
+type DefaultSlateDefinition = SlateDefinition<DefaultPlugins>;
+export type CreateInitialStateCustomizer<TPlugins> = (
+  { plugins }: { plugins: TPlugins }
 ) => InitialSlateStateDef;
 
 const defaultConfig: DefaultSlateDefinition = {
@@ -89,32 +79,44 @@ const defaultConfig: DefaultSlateDefinition = {
   translations: defaultTranslations,
   migrations,
 
-  createInitialSlateState: ({ plugins }) => ({
-    children: [
-      {
-        plugin: plugins.paragraphs.paragraph,
-        children: [''],
-      },
-    ],
-  }),
   allowInlineNeighbours: true,
 };
 
-type CreateInitialSlateState = (
-  custom?: CreateInitialStateCustomizer
+type CreateInitialSlateState<TPlugins> = (
+  custom?: CreateInitialStateCustomizer<TPlugins>
 ) => { editorState: Value };
-export type SlatePlugin = ContentPluginConfig<SlateState> & {
-  createInitialSlateState: CreateInitialSlateState;
+export type SlatePlugin<TPlugins> = ContentPluginConfig<SlateState> & {
+  createInitialSlateState: CreateInitialSlateState<TPlugins>;
 };
-export type SlateCustomizeFunction = (
+export type SlateCustomizeFunction<TPlugins extends SlatePluginCollection> = (
   def: DefaultSlateDefinition
-) => SlateDefinition;
-export default (customize?: SlateCustomizeFunction): SlatePlugin => {
-  const settings = customize ? customize(defaultConfig) : defaultConfig;
+) => SlateDefinition<TPlugins>;
+
+function plugin<TPlugins extends SlatePluginCollection = DefaultPlugins>(
+  customize?: SlateCustomizeFunction<TPlugins>
+): SlatePlugin<TPlugins> {
+  const settings = (customize
+    ? customize(defaultConfig)
+    : defaultConfig) as SlateDefinition<TPlugins>;
+
   const createInitialState = (
-    customizeInitialSlateState?: CreateInitialStateCustomizer
+    customizeInitialSlateState?: CreateInitialStateCustomizer<TPlugins>
   ) => {
-    const func = customizeInitialSlateState || settings.createInitialSlateState;
+    const defaultInitialState = ({
+      plugins: cplugins,
+    }: {
+      plugins: TPlugins;
+    }) => ({
+      children: [
+        {
+          plugin: cplugins.paragraphs.paragraph,
+          children: [''],
+        },
+      ],
+    });
+    const func = customizeInitialSlateState
+      ? customizeInitialSlateState
+      : defaultInitialState;
 
     return transformInitialSlateState(func({ plugins: settings.plugins }));
   };
@@ -185,4 +187,6 @@ export default (customize?: SlateCustomizeFunction): SlatePlugin => {
 
     migrations: settings.migrations,
   };
-};
+}
+
+export default plugin;
diff --git a/packages/plugins/content/slate/src/pluginFactories/createComponentPlugin.tsx b/packages/plugins/content/slate/src/pluginFactories/createComponentPlugin.tsx
@@ -104,19 +104,17 @@ function createComponentPluginWithDefinition<T extends {}>(
   };
 }
 
-export type CustomizeFunction<T, CT> = (
-  def: SlateComponentPluginDefinition<T>
-) => SlateComponentPluginDefinition<T & CT>;
-
-function createComponentPlugin<T>(
-  definition: SlateComponentPluginDefinition<T>
-) {
-  return function<CT>(customize?: CustomizeFunction<T, CT>) {
-    if (customize) {
-      return createComponentPluginWithDefinition<T & CT>(customize(definition));
-    }
-    return createComponentPluginWithDefinition<T>(definition);
+function createComponentPlugin<T = {}>(def: SlateComponentPluginDefinition<T>) {
+  const customizablePlugin = function<CT>(
+    customize: (
+      t: SlateComponentPluginDefinition<T>
+    ) => SlateComponentPluginDefinition<T & CT> = d =>
+      (d as unknown) as SlateComponentPluginDefinition<T & CT>
+  ) {
+    return createComponentPlugin(customize(def));
   };
+  customizablePlugin.toPlugin = () => createComponentPluginWithDefinition(def);
+  return customizablePlugin;
 }
 
 export default createComponentPlugin;
diff --git a/packages/plugins/content/slate/src/pluginFactories/createDataPlugin.tsx b/packages/plugins/content/slate/src/pluginFactories/createDataPlugin.tsx
@@ -10,18 +10,17 @@ function createDataPluginWithDefinition<T extends {}>(
   };
 }
 
-type CustomizeFunction<T extends {}> = (
-  def: SlateDataPluginDefinition<T>
-) => SlateDataPluginDefinition<T>;
-
-function createDataPlugin<T extends {}>(
-  definition: SlateDataPluginDefinition<T>
-) {
-  return (customize?: CustomizeFunction<T>): SlatePlugin => {
-    return createDataPluginWithDefinition<T>(
-      customize ? customize(definition) : definition
-    );
+function createDataPlugin<T = {}>(def: SlateDataPluginDefinition<T>) {
+  const customizablePlugin = function<CT>(
+    customize: (
+      t: SlateDataPluginDefinition<T>
+    ) => SlateDataPluginDefinition<T & CT> = d =>
+      (d as unknown) as SlateDataPluginDefinition<T & CT>
+  ) {
+    return createDataPlugin(customize(def));
   };
+  customizablePlugin.toPlugin = () => createDataPluginWithDefinition(def);
+  return customizablePlugin;
 }
 
 export default createDataPlugin;
diff --git a/packages/plugins/content/slate/src/pluginFactories/createListIndentionPlugin.tsx b/packages/plugins/content/slate/src/pluginFactories/createListIndentionPlugin.tsx
@@ -8,11 +8,7 @@ type Definition = {
   listTypes: string[];
 };
 
-type Customize = (d: Definition) => Definition;
-
-export default (defaultDefinition: Definition) => (customize?: Customize) => {
-  const def = customize ? customize(defaultDefinition) : defaultDefinition;
-
+const ceateSlatePlugin = (def: Definition) => {
   const slateEditList = createSlateEditList({
     typeItem: def.listItemType,
     types: def.listTypes,
@@ -62,3 +58,15 @@ export default (defaultDefinition: Definition) => (customize?: Customize) => {
     }),
   ];
 };
+
+function createListIndentionPlugin(def: Definition) {
+  const customizablePlugin = function(
+    customize: (def2: Definition) => Definition
+  ) {
+    return createListIndentionPlugin(customize(def));
+  };
+  customizablePlugin.toPlugin = () => ceateSlatePlugin(def);
+  return customizablePlugin;
+}
+
+export default createListIndentionPlugin;