feat: load vditor dep from local (#4190)

* feat: load vditor dep from local

* fix: plugin-field-markdown-vditor build config

* Revert "fix: plugin-field-markdown-vditor build config"

This reverts commit 60d344d3402e0da916c918f65c81b1cd734fa3ce.

* feat: plugin-field-markdown-vditor: use NODE_ENV

* fix: plugin-field-markdown-vdtor dep preload

* fix: plugin-field-markdown-vdtor dep preload

* fix: plugin-field-markdown-vdtor dep preload

* feat: plugin-field-markdown-vditor set default valut for edit

* fix: cdn

* fix: set vditor editor value after create

* fix: cdn

---------

Co-authored-by: chenos <chenlinxh@gmail.com>

packages/plugins/@nocobase/plugin-field-markdown-vditor/build.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from '@nocobase/build';
+import fs from 'fs/promises';
+import path from 'path';
+
+const vditor = path.dirname(require.resolve('vditor'));
+
+export default defineConfig({
+  afterBuild: async (log) => {
+    log('coping vditor dist');
+    await fs.cp(vditor, path.resolve(__dirname, 'dist/client/vditor/dist'), {
+      recursive: true,
+      force: true,
+    });
+  },
+});

packages/plugins/@nocobase/plugin-field-markdown-vditor/package.json

@@ -21,7 +21,7 @@
     "@formily/react": "2.x",
     "@formily/shared": "2.x",
     "antd": "5.x",
-    "katex": "^0.16.10",
+    "koa-send": "^5.0.1",
     "vditor": "^3.10.3"
   },
   "keywords": [

packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Display.tsx

@@ -1,8 +1,10 @@
 import { Field } from '@formily/core';
 import { useField } from '@formily/react';
+import { withDynamicSchemaProps } from '@nocobase/client';
 import { Popover } from 'antd';
 import React, { CSSProperties, useCallback, useEffect, useRef, useState } from 'react';
 import Vditor from 'vditor';
+import { useCDN } from './const';
 import useStyle from './style';
 
 function convertToText(markdownText: string) {
@@ -26,10 +28,14 @@ const getContentWidth = (element) => {
 function DisplayInner(props: { value: string; style?: CSSProperties }) {
   const containerRef = useRef<HTMLDivElement>();
   const { wrapSSR, componentCls, hashId } = useStyle();
+  const cdn = useCDN();
 
   useEffect(() => {
     if (!props.value) return;
-    Vditor.preview(containerRef.current, props.value, { mode: 'light' });
+    Vditor.preview(containerRef.current, props.value, {
+      mode: 'light',
+      cdn,
+    });
   }, [props.value]);
 
   return wrapSSR(
@@ -39,9 +45,10 @@ function DisplayInner(props: { value: string; style?: CSSProperties }) {
   );
 }
 
-export const Display = (props) => {
+export const Display = withDynamicSchemaProps((props) => {
   const field = useField<Field>();
   const value = props.value ?? field.value;
+  const cdn = useCDN();
 
   const containerRef = useRef<HTMLDivElement>();
 
@@ -55,7 +62,10 @@ export const Display = (props) => {
   useEffect(() => {
     if (!props.value || !field.value) return;
     if (props.ellipsis) {
-      Vditor.md2html(props.value, { mode: 'light' })
+      Vditor.md2html(props.value, {
+        mode: 'light',
+        cdn,
+      })
         .then((html) => {
           setText(convertToText(html));
         })
@@ -63,6 +73,7 @@ export const Display = (props) => {
     } else {
       Vditor.preview(containerRef.current, props.value ?? field.value, {
         mode: 'light',
+        cdn,
       });
     }
   }, [props.value, props.ellipsis, field.value]);
@@ -107,4 +118,4 @@ export const Display = (props) => {
   }
 
   return <DisplayInner value={value} />;
-};
+});

packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Edit.tsx

@@ -1,8 +1,9 @@
-import React, { useRef, useEffect, useLayoutEffect } from 'react';
+import { useAPIClient, useApp, withDynamicSchemaProps } from '@nocobase/client';
+import React, { useEffect, useLayoutEffect, useRef } from 'react';
 import Vditor from 'vditor';
-import { useAPIClient, withDynamicSchemaProps, useApp } from '@nocobase/client';
-import useStyle from './style';
 import { defaultToolbar } from '../interfaces/markdown-vditor';
+import { useCDN } from './const';
+import useStyle from './style';
 
 export const Edit = withDynamicSchemaProps((props) => {
   const { disabled, onChange, value, fileCollection, toolbar } = props;
@@ -13,13 +14,14 @@ export const Edit = withDynamicSchemaProps((props) => {
   const containerParentRef = useRef<HTMLDivElement>();
   const app = useApp();
   const apiClient = useAPIClient();
+  const cdn = useCDN();
   const { wrapSSR, hashId, componentCls: containerClassName } = useStyle();
 
   useEffect(() => {
     const uploadFileCollection = fileCollection ?? 'attachments';
     const toolbarConfig = toolbar ?? defaultToolbar;
     const vditor = new Vditor(containerRef.current, {
-      value,
+      value: value ?? '',
       lang: apiClient.auth.locale.replaceAll('-', '_') as any,
       cache: {
         enable: false,
@@ -34,9 +36,11 @@ export const Edit = withDynamicSchemaProps((props) => {
       fullscreen: {
         index: 1200,
       },
+      cdn,
       minHeight: 200,
       after: () => {
         vdRef.current = vditor;
+        vditor.setValue(value ?? '');
         if (disabled) {
           vditor.disabled();
         } else {
@@ -71,7 +75,7 @@ export const Edit = withDynamicSchemaProps((props) => {
       vdRef.current?.destroy();
       vdRef.current = undefined;
     };
-  }, [fileCollection, toolbar]);
+  }, [fileCollection, toolbar?.join(',')]);
 
   useEffect(() => {
     if (value === vdRef?.current?.getValue()) {

packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/const.ts

@@ -0,0 +1,7 @@
+import { usePlugin } from '@nocobase/client';
+import { PluginFieldMarkdownVditorClient } from '../';
+
+export const useCDN = () => {
+  const plugin = usePlugin(PluginFieldMarkdownVditorClient);
+  return plugin.getCDN();
+};

packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/index.tsx

@@ -1,8 +1,7 @@
 import { Plugin } from '@nocobase/client';
+import 'vditor/dist/index.css';
 import { MarkdownVditor } from './components';
 import { MarkdownVditorFieldInterface } from './interfaces/markdown-vditor';
-import 'vditor/dist/index.css';
-import katex from 'katex';
 export class PluginFieldMarkdownVditorClient extends Plugin {
   async afterAdd() {}
 
@@ -10,12 +9,44 @@ export class PluginFieldMarkdownVditorClient extends Plugin {
 
   async load() {
     this.app.addComponents({ MarkdownVditor });
-    this.initKatexDependency();
+    this.initVditorDependency();
     this.app.dataSourceManager.addFieldInterfaces([MarkdownVditorFieldInterface]);
   }
 
-  initKatexDependency() {
+  getCDN() {
-    window['katex'] = katex;
+    if (process.env.NODE_ENV !== 'production') {
+      // 开发模式下使用远程 cdn
+      return 'https://cdn.jsdelivr.net/npm/vditor@3.10.4';
+    }
+    // 生产环境，使用本地链接，支持内网
+    // 需要支持子目录，比如应用部署在 /xxx/ 目录下
+    return this.app.getPublicPath() + 'static/plugins/@nocobase/plugin-field-markdown-vditor/dist/client/vditor';
+  }
+
+  initVditorDependency() {
+    const cdn = this.getCDN();
+    try {
+      const vditorDepdencePrefix = 'plugin-field-markdown-vditor-dep';
+      const vditorDepdence = {
+        [`${vditorDepdencePrefix}.katex`]: `${cdn}/dist/js/katex/katex.min.js?v=0.16.9`,
+        [`${vditorDepdencePrefix}.ABCJS`]: `${cdn}/dist/js/abcjs/abcjs_basic.min`,
+        [`${vditorDepdencePrefix}.plantumlEncoder`]: `${cdn}/dist/js/plantuml/plantuml-encoder.min`,
+        [`${vditorDepdencePrefix}.echarts`]: `${cdn}/dist/js/echarts/echarts.min`,
+        [`${vditorDepdencePrefix}.flowchart`]: `${cdn}/dist/js/flowchart.js/flowchart.min`,
+        [`${vditorDepdencePrefix}.Viz`]: `${cdn}/dist/js/graphviz/viz`,
+        [`${vditorDepdencePrefix}.mermaid`]: `${cdn}/dist/js/mermaid/mermaid.min`,
+      };
+      this.app.requirejs.require.config({
+        paths: vditorDepdence,
+      });
+      Object.keys(vditorDepdence).forEach((key) => {
+        this.app.requirejs.require([key], (m) => {
+          window[key.split('.')[1]] = m;
+        });
+      });
+    } catch (e) {
+      console.log('initVditorDependency failed', e);
+    }
   }
 }