feat: support custom plate plugins and custom toolbars

Replaces contentful#702

Author: IBurn36360

packages/rich-text/src/RichTextEditor.tsx

@@ -11,6 +11,7 @@ import noop from 'lodash/noop';
 
 import { ContentfulEditorIdProvider, getContentfulEditorId } from './ContentfulEditorProvider';
 import { toSlateValue } from './helpers/toSlateValue';
+import { PlatePlugin } from './internal';
 import { normalizeInitialValue } from './internal/misc';
 import { getPlugins, disableCorePlugins } from './plugins';
 import { RichTextTrackingActionHandler } from './plugins/Tracking';
@@ -31,15 +32,20 @@ type ConnectedProps = {
   isToolbarHidden?: boolean;
   actionsDisabled?: boolean;
   restrictedMarks?: string[];
+  customPlugins?: PlatePlugin[];
+  customToolbars?: React.JSXElementConstructor<{
+    isDisabled?: boolean;
+    [index: string]: unknown;
+  }>[];
 };
 
 export const ConnectedRichTextEditor = (props: ConnectedProps) => {
   const { sdk, onAction, restrictedMarks } = props;
 
   const id = getContentfulEditorId(sdk);
   const plugins = React.useMemo(
-    () => getPlugins(sdk, onAction ?? noop, restrictedMarks),
-    [sdk, onAction, restrictedMarks]
+    () => getPlugins(sdk, onAction ?? noop, restrictedMarks, props?.customPlugins ?? []),
+    [sdk, onAction, restrictedMarks, props?.customPlugins]
   );
 
   const initialValue = React.useMemo(() => {
@@ -73,6 +79,15 @@ export const ConnectedRichTextEditor = (props: ConnectedProps) => {
             {!props.isToolbarHidden && (
               <StickyToolbarWrapper isDisabled={props.isDisabled}>
                 <Toolbar isDisabled={props.isDisabled} />
+                {/* Custom toolbars are placed underneath Contentful's built-in one */}
+                {props?.customToolbars?.length &&
+                  props.customToolbars.map((ToolbarComponent, index) => {
+                    return (
+                      <React.Fragment key={index}>
+                        <ToolbarComponent isDisabled={props.isDisabled} />
+                      </React.Fragment>
+                    );
+                  })}
               </StickyToolbarWrapper>
             )}
             <SyncEditorChanges incomingValue={initialValue} onChange={props.onChange} />

packages/rich-text/src/plugins/index.ts

@@ -32,7 +32,8 @@ import { createVoidsPlugin } from './Voids';
 export const getPlugins = (
   sdk: FieldExtensionSDK,
   onAction: RichTextTrackingActionHandler,
-  restrictedMarks?: string[]
+  restrictedMarks?: string[],
+  customPlugins?: PlatePlugin[]
 ): PlatePlugin[] => [
   createDeserializeDocxPlugin(),
 
@@ -79,6 +80,10 @@ export const getPlugins = (
   createExitBreakPlugin(),
   createResetNodePlugin(),
   createNormalizerPlugin(),
+
+  // We need to check if the plugins are defined before use because it is an
+  // optional parameter.
+  ...(Array.isArray(customPlugins) ? customPlugins : []),
 ];
 
 export const disableCorePlugins: PlateProps['disableCorePlugins'] = {