From 0d9b43206c3e70e8f11ec41ca17e8286a5f6f644 Mon Sep 17 00:00:00 2001 From: Sun668 <947692259@qq.com> Date: Sun, 28 Apr 2024 11:23:14 +0800 Subject: [PATCH] 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 --- .../build.config.ts | 15 +++++++ .../plugin-field-markdown-vditor/package.json | 2 +- .../src/client/components/Display.tsx | 19 +++++++-- .../src/client/components/Edit.tsx | 14 ++++--- .../src/client/components/const.ts | 7 ++++ .../src/client/index.tsx | 41 ++++++++++++++++--- 6 files changed, 83 insertions(+), 15 deletions(-) create mode 100644 packages/plugins/@nocobase/plugin-field-markdown-vditor/build.config.ts create mode 100644 packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/const.ts diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/build.config.ts b/packages/plugins/@nocobase/plugin-field-markdown-vditor/build.config.ts new file mode 100644 index 0000000000..696749bedf --- /dev/null +++ b/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, + }); + }, +}); diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/package.json b/packages/plugins/@nocobase/plugin-field-markdown-vditor/package.json index 3f2e0dc817..0112dbae43 100644 --- a/packages/plugins/@nocobase/plugin-field-markdown-vditor/package.json +++ b/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": [ diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Display.tsx b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Display.tsx index e449ba1d23..cdabb38735 100644 --- a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Display.tsx +++ b/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(); 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(); const value = props.value ?? field.value; + const cdn = useCDN(); const containerRef = useRef(); @@ -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 ; -}; +}); diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Edit.tsx b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Edit.tsx index 91246f44c0..57d3e7de89 100644 --- a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/Edit.tsx +++ b/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(); 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()) { diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/const.ts b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/components/const.ts new file mode 100644 index 0000000000..0d02033e82 --- /dev/null +++ b/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(); +}; diff --git a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/index.tsx b/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/index.tsx index 17bbb5680c..c5d4210871 100644 --- a/packages/plugins/@nocobase/plugin-field-markdown-vditor/src/client/index.tsx +++ b/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() { - window['katex'] = katex; + getCDN() { + 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); + } } }