[add] The WangEditor component (90%)

packages/xgen/components/edit/List/model.ts

@@ -4,7 +4,6 @@ import { injectable } from 'tsyringe'
 import { ColumnUtils, Common } from '@/services'
 
 import type { List, Common as CommonType } from '@/types'
-import { ICustom } from '../RichText'
 import { IProps } from 'ahooks/lib/useWhyDidYouUpdate'
 
 @injectable()

packages/xgen/components/edit/WangEditor/index.less

@@ -0,0 +1,45 @@
+._local {
+	// textarea - css vars
+	--w-e-textarea-bg-color: transparent;
+	--w-e-textarea-color: var(--color_text);
+	--w-e-textarea-border-color: var(--color_border);
+	--w-e-textarea-slight-border-color: var(--color_border_light);
+	--w-e-textarea-slight-color: var(--color_text_grey);
+	--w-e-textarea-slight-bg-color: var(--color_bg);
+	--w-e-textarea-selected-border-color: #b4d5ff; // 选中的元素，如选中了分割线
+	--w-e-textarea-handler-bg-color: var(--color_main); // 工具，如图片拖拽按钮
+	--w-e-textarea-border-radius: var(--radius);
+
+	// toolbar - css vars
+	--w-e-toolbar-color: var(--color_title);
+	--w-e-toolbar-bg-color: var(--color_bg_nav);
+	--w-e-toolbar-active-color: var(--color_text_contrast);
+	--w-e-toolbar-active-bg-color: var(--color_bg);
+	--w-e-toolbar-disabled-color: var(--color_text_grey);
+	--w-e-toolbar-border-color: var(--color_border_soft);
+
+	// modal - css vars
+	--w-e-modal-button-bg-color: var(--color_bg);
+	--w-e-modal-button-border-color: var(--color_border_soft);
+
+	padding: 4px 12px 12px 12px;
+	z-index: 500;
+	background: var(--color_bg_nav);
+	border-radius: var(--radius);
+}
+
+._editor {
+	background: var(--color_bg_menu);
+	border-radius: var(--radius);
+	padding: 12px 24px 12px 24px;
+}
+
+._toolbar {
+	display: flex;
+	flex-wrap: wrap;
+	padding: 8px 0;
+
+	button {
+		border-radius: var(--radius);
+	}
+}

packages/xgen/components/edit/WangEditor/index.tsx

@@ -0,0 +1,77 @@
+import '@wangeditor/editor/dist/css/style.css'
+
+import { useState, useEffect } from 'react'
+import { Editor, Toolbar } from '@wangeditor/editor-for-react'
+import { IDomEditor, IEditorConfig, IToolbarConfig } from '@wangeditor/editor'
+
+import { Item } from '@/components'
+import { getLocale } from '@umijs/max'
+
+import type { Component } from '@/types'
+import clsx from 'clsx'
+import styles from './index.less'
+
+export interface IWangEditor {
+	value: any
+	disabled?: boolean
+	maxHeight?: number
+	UploadByFileApi?: string
+	UploadByUrlApi?: string
+	placeholder?: string
+	onChange?: (v: any) => void
+}
+
+interface IProps extends Component.PropsEditComponent, IWangEditor {}
+
+const WangEditor = window.$app.memo((props: IWangEditor) => {
+	const is_cn = getLocale() === 'zh-CN'
+	const [editor, setEditor] = useState<IDomEditor | null>(null)
+	const [html, setHtml] = useState(props.value)
+	const toolbarConfig: Partial<IToolbarConfig> = {}
+	const editorConfig: Partial<IEditorConfig> = {
+		placeholder: props.placeholder || is_cn ? '请输入内容' : 'Please enter content'
+	}
+
+	useEffect(() => {
+		return () => {
+			if (editor == null) return
+			editor.destroy()
+			setEditor(null)
+		}
+	}, [editor])
+
+	return (
+		<div className={clsx([styles._local])}>
+			<Toolbar
+				className={clsx([styles._toolbar])}
+				editor={editor}
+				defaultConfig={toolbarConfig}
+				mode='default'
+			/>
+			<Editor
+				className={clsx([styles._editor])}
+				mode='default'
+				defaultConfig={editorConfig}
+				value={html}
+				onCreated={setEditor}
+				onChange={(editor) => {
+					const html = editor.getHtml()
+					setHtml(html)
+					props.onChange?.(html)
+				}}
+			/>
+		</div>
+	)
+})
+
+const Index = (props: IProps) => {
+	const { __bind, __name, itemProps, ...rest_props } = props
+
+	return (
+		<Item {...itemProps} {...{ __bind, __name }}>
+			<WangEditor {...rest_props}></WangEditor>
+		</Item>
+	)
+}
+
+export default window.$app.memo(Index)

packages/xgen/package.json

@@ -39,6 +39,8 @@
             "@mdx-js/mdx": "^2.3.0",
             "@mdx-js/react": "^2.3.0",
             "@umijs/max": "4.0.68",
+            "@wangeditor/editor": "^5.1.23",
+            "@wangeditor/editor-for-react": "^1.0.6",
             "@yaoapp/actionflow": "workspace:*",
             "@yaoapp/editorjs_plugins": "workspace:*",
             "@yaoapp/emittery": "workspace:*",