feat(widget-markdown): allow registering remark plugins (#5633)

packages/netlify-cms-core/index.d.ts

@@ -2,6 +2,7 @@
 declare module 'netlify-cms-core' {
   import type { ComponentType } from 'react';
   import type { List, Map } from 'immutable';
+  import type { Pluggable } from 'unified';
 
   export type CmsBackendType =
     | 'azure'
@@ -543,6 +544,7 @@ declare module 'netlify-cms-core' {
   export interface CMS {
     getBackend: (name: string) => CmsRegistryBackend | undefined;
     getEditorComponents: () => Map<string, ComponentType<any>>;
+    getRemarkPlugins: () => Array<Pluggable>;
     getLocale: (locale: string) => CmsLocalePhrases | undefined;
     getMediaLibrary: (name: string) => CmsMediaLibrary | undefined;
     getPreviewStyles: () => PreviewStyle[];
@@ -552,6 +554,7 @@ declare module 'netlify-cms-core' {
     init: (options?: InitOptions) => void;
     registerBackend: (name: string, backendClass: CmsBackendClass) => void;
     registerEditorComponent: (options: EditorComponentOptions) => void;
+    registerRemarkPlugin: (plugin: Pluggable) => void;
     registerEventListener: (
       eventListener: CmsEventListener,
       options?: CmsEventListenerOptions,

packages/netlify-cms-core/src/components/Editor/EditorControlPane/Widget.js

@@ -4,6 +4,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import { Map, List } from 'immutable';
 import { oneLine } from 'common-tags';
 
+import { getRemarkPlugins } from '../../../lib/registry';
 import ValidationErrorTypes from '../../../constants/validationErrorTypes';
 
 function truthy() {
@@ -326,6 +327,7 @@ export default class Widget extends Component {
       resolveWidget,
       widget,
       getEditorComponents,
+      getRemarkPlugins,
       query,
       queryHits,
       clearSearch,

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewPane.js

@@ -7,7 +7,12 @@ import Frame, { FrameContextConsumer } from 'react-frame-component';
 import { lengths } from 'netlify-cms-ui-default';
 import { connect } from 'react-redux';
 
-import { resolveWidget, getPreviewTemplate, getPreviewStyles } from '../../../lib/registry';
+import {
+  resolveWidget,
+  getPreviewTemplate,
+  getPreviewStyles,
+  getRemarkPlugins,
+} from '../../../lib/registry';
 import { ErrorBoundary } from '../../UI';
 import { selectTemplateName, selectInferedField, selectField } from '../../../reducers/collections';
 import { boundGetAsset } from '../../../actions/media';
@@ -45,6 +50,7 @@ export class PreviewPane extends React.Component {
         entry={entry}
         fieldsMetaData={metadata}
         resolveWidget={resolveWidget}
+        getRemarkPlugins={getRemarkPlugins}
       />
     );
   };

packages/netlify-cms-core/src/lib/registry.js

@@ -26,6 +26,7 @@ const registry = {
   previewStyles: [],
   widgets: {},
   editorComponents: Map(),
+  remarkPlugins: [],
   widgetValueSerializers: {},
   mediaLibraries: [],
   locales: {},
@@ -43,6 +44,8 @@ export default {
   resolveWidget,
   registerEditorComponent,
   getEditorComponents,
+  registerRemarkPlugin,
+  getRemarkPlugins,
   registerWidgetValueSerializer,
   getWidgetValueSerializer,
   registerBackend,
@@ -163,6 +166,19 @@ export function getEditorComponents() {
   return registry.editorComponents;
 }
 
+/**
+ * Remark plugins
+ */
+/** @typedef {import('unified').Pluggable} RemarkPlugin */
+/** @type {(plugin: RemarkPlugin) => void} */
+export function registerRemarkPlugin(plugin) {
+  registry.remarkPlugins.push(plugin);
+}
+/** @type {() => Array<RemarkPlugin>} */
+export function getRemarkPlugins() {
+  return registry.remarkPlugins;
+}
+
 /**
  * Widget Serializers
  */