You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
924 B
JavaScript
44 lines
924 B
JavaScript
import { useState, useEffect } from 'react'
|
|
import LexicalEditor from '@/components/LexicalEditor'
|
|
import { isEmpty } from '@/utils/commons';
|
|
|
|
/**
|
|
* 封装的编辑组件, 用于在Form.Item 中使用
|
|
*/
|
|
const LexicalEditorInput = (props) => {
|
|
const { id, value = {}, onChange } = props
|
|
|
|
const [defaultHtml, setDefaultHtml] = useState('');
|
|
useEffect(() => {
|
|
if (typeof value === 'string' && !isEmpty(value)) {
|
|
setDefaultHtml(value)
|
|
}
|
|
|
|
return () => {}
|
|
}, [value])
|
|
|
|
/**
|
|
* 触发onChange
|
|
* changedValue: { editorStateJSON, htmlContent, textContent }
|
|
*/
|
|
const triggerChange = (changedValue) => {
|
|
onChange?.({
|
|
// ...value,
|
|
...changedValue,
|
|
})
|
|
}
|
|
|
|
return (
|
|
<LexicalEditor
|
|
id={id}
|
|
{...{ isRichText: true }}
|
|
onChange={(val) => {
|
|
triggerChange(val)
|
|
}}
|
|
defaultValue={defaultHtml}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default LexicalEditorInput
|