(incubator-answer) branch feat/markdown-render updated: feat: Add useRenderPlugin to Editor component

[robin0716]

This is an automated email from the ASF dual-hosted git repository.

robin0716 pushed a commit to branch feat/markdown-render
in repository https://gitbox.apache.org/repos/asf/incubator-answer.git


The following commit(s) were added to refs/heads/feat/markdown-render by this 
push:
     new d4178326 feat: Add useRenderPlugin to Editor component
d4178326 is described below

commit d41783260ca2a9ccdbc4b8036836770ed6b10609
Author: robin <ro...@rnode.me>
AuthorDate: Thu Aug 15 10:57:33 2024 +0800

    feat: Add useRenderPlugin to Editor component
---
 ui/src/components/Editor/index.tsx  |  4 +++-
 ui/src/utils/pluginKit/index.ts     | 28 +++++++++++++++++++++++++++-
 ui/src/utils/pluginKit/interface.ts |  2 +-
 3 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/ui/src/components/Editor/index.tsx 
b/ui/src/components/Editor/index.tsx
index dd004021..ead37653 100644
--- 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
index 26e3a288..6d0e9878 100644
--- 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
index 462ae47b..880a524a 100644
--- 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;