feat: Add useRenderPlugin to Editor component

apache · Aug 21, 2024 · 7c59d3f · 7c59d3f
1 parent 8551653
commit 7c59d3f
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/ui/src/components/Editor/index.tsx b/ui/src/components/Editor/index.tsx
@@ -27,7 +27,7 @@ import {
 
 import classNames from 'classnames';
 
-import { PluginType } from '@/utils/pluginKit';
+import { PluginType, useRenderPlugin } from '@/utils/pluginKit';
 import PluginRender from '../PluginRender';
 
 import {
@@ -84,6 +84,8 @@ const MDEditor: ForwardRefRenderFunction<EditorRef, Props> = (
   const editorRef = useRef<HTMLDivElement>(null);
   const previewRef = useRef<{ getHtml; element } | null>(null);
 
+  useRenderPlugin(previewRef.current?.element);
+
   const editor = useEditor({
     editorRef,
     onChange,

diff --git a/ui/src/utils/pluginKit/index.ts b/ui/src/utils/pluginKit/index.ts
@@ -232,6 +232,26 @@ const useRenderHtmlPlugin = (
     });
 };
 
+// Only for render type plugins
+const useRenderPlugin = (
+  element: HTMLElement | RefObject<HTMLElement> | null,
+) => {
+  return plugins
+    .getPlugins()
+    .filter((plugin) => {
+      return (
+        plugin.activated &&
+        plugin.hooks?.useRender &&
+        plugin.info.type === PluginType.Render
+      );
+    })
+    .forEach((plugin) => {
+      plugin.hooks?.useRender?.forEach((hook) => {
+        hook(element);
+      });
+    });
+};
+
 // Only one captcha type plug-in can be enabled at the same time
 const useCaptchaPlugin = (key: Type.CaptchaKey) => {
   const captcha = plugins
@@ -248,5 +268,11 @@ const useCaptchaPlugin = (key: Type.CaptchaKey) => {
 
 export type { Plugin, PluginInfo };
 
-export { useRenderHtmlPlugin, mergeRoutePlugins, useCaptchaPlugin, PluginType };
+export {
+  useRenderHtmlPlugin,
+  mergeRoutePlugins,
+  useCaptchaPlugin,
+  useRenderPlugin,
+  PluginType,
+};
 export default plugins;
diff --git a/ui/src/utils/pluginKit/interface.ts b/ui/src/utils/pluginKit/interface.ts
@@ -46,7 +46,7 @@ export interface Plugin {
     useRender?: Array<
       (element: HTMLElement | RefObject<HTMLElement> | null) => void
     >;
-    useCaptcha?: (props: { captchaKey: Type.CaptchaKey; commonProps: any; }) => {
+    useCaptcha?: (props: { captchaKey: Type.CaptchaKey; commonProps: any }) => {
       getCaptcha: () => Record<string, any>;
       check: (t: () => void) => void;
       handleCaptchaError: (error) => any;