mirror of https://github.com/msgbyte/tailchat
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.
45 lines
1.1 KiB
TypeScript
45 lines
1.1 KiB
TypeScript
import React from 'react';
|
|
import {
|
|
Remirror,
|
|
useRemirror,
|
|
OnChangeJSON,
|
|
EditorComponent,
|
|
} from '@remirror/react';
|
|
import { useMemoizedFn } from 'ahooks';
|
|
import type { RemirrorJSON } from 'remirror';
|
|
import { Toolbar } from './toolbar';
|
|
import { extensions } from './extensions';
|
|
import { transformToBBCode } from './bbcode';
|
|
import './editor.css';
|
|
|
|
interface RichEditorProps extends React.PropsWithChildren {
|
|
initContent: string;
|
|
onChange: (bbcode: string) => void;
|
|
}
|
|
export const RichEditor: React.FC<RichEditorProps> = React.memo((props) => {
|
|
const { manager, state } = useRemirror({
|
|
extensions,
|
|
content: props.initContent,
|
|
stringHandler: 'html',
|
|
selection: 'end',
|
|
});
|
|
|
|
const handleChange = useMemoizedFn((json: RemirrorJSON) => {
|
|
props.onChange(transformToBBCode(json));
|
|
});
|
|
|
|
return (
|
|
<Remirror
|
|
classNames={['tailchat-rich-editor']}
|
|
manager={manager}
|
|
initialContent={state}
|
|
>
|
|
<Toolbar />
|
|
<EditorComponent />
|
|
<OnChangeJSON onChange={handleChange} />
|
|
{props.children}
|
|
</Remirror>
|
|
);
|
|
});
|
|
RichEditor.displayName = 'RichEditor';
|