generated from template/astro-template
43 lines
1.2 KiB
TypeScript
43 lines
1.2 KiB
TypeScript
import { createEditor } from '@kevisual/codemirror';
|
|
import { Chain } from '@kevisual/codemirror/utils';
|
|
import { CacheWorkspace } from '@kevisual/cache';
|
|
import { debounce } from 'lodash-es';
|
|
import { Button } from '@/components/a/button';
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
type TextEditorProps = {
|
|
filepath: string;
|
|
content: string;
|
|
chain?: Chain;
|
|
};
|
|
export const TextEditor = ({ filepath, content, chain }: TextEditorProps) => {
|
|
const editorElRef = useRef<HTMLDivElement>(null);
|
|
const editorRef = useRef<ReturnType<typeof createEditor>>(null);
|
|
useEffect(() => {
|
|
initEditor();
|
|
return () => {
|
|
if (editorRef.current) {
|
|
chain?.destroy?.();
|
|
}
|
|
};
|
|
}, []);
|
|
useEffect(() => {
|
|
if (editorRef.current) {
|
|
chain?.setContent?.(content);
|
|
}
|
|
}, [content]);
|
|
const initEditor = async () => {
|
|
if (!editorElRef.current) return;
|
|
const editor = createEditor(editorElRef.current, {
|
|
type: 'html',
|
|
});
|
|
const cmScroller = editorElRef.current.querySelector('.cm-scroller');
|
|
if (cmScroller) {
|
|
cmScroller.classList.add('scrollbar');
|
|
}
|
|
chain?.setEditor?.(editor);
|
|
editorRef.current = editor;
|
|
};
|
|
return <div className='h-full overflow-hidden' ref={editorElRef}></div>;
|
|
};
|