/
githubmirror
/
quill
Обзор
Документация
Войти
/
githubmirror
/
quill
Код
Запросы
0
Пакеты
0
Релизы
0
Аналитика
Безопасность
main
packages/website/src/playground/react/Editor.js
55 строк
1 KB
Zihua Li
Make Quill an ESM package (#4047)
12 мар 2024, 16:45
Не верифицирован
12 мар 2024, 16:45
80f22d8
Код
Авторство
О чём код?
import React, { forwardRef, useEffect, useLayoutEffect, useRef } from 'react'; // Editor is an uncontrolled React component const Editor = forwardRef( ({ readOnly, defaultValue, onTextChange, onSelectionChange }, ref) => { const containerRef = useRef(null); const defaultValueRef = useRef(defaultValue); const onTextChangeRef = useRef(onTextChange); const onSelectionChangeRef = useRef(onSelectionChange); useLayoutEffect(() => { onTextChangeRef.current = onTextChange; onSelectionChangeRef.current = onSelectionChange; }); useEffect(() => { ref.current?.enable(!readOnly); }, [ref, readOnly]); useEffect(() => { const container = containerRef.current; const editorContainer = container.appendChild( container.ownerDocument.createElement('div'), ); const quill = new Quill(editorContainer, { theme: 'snow', }); ref.current = quill; if (defaultValueRef.current) { quill.setContents(defaultValueRef.current); } quill.on(Quill.events.TEXT_CHANGE, (...args) => { onTextChangeRef.current?.(...args); }); quill.on(Quill.events.SELECTION_CHANGE, (...args) => { onSelectionChangeRef.current?.(...args); }); return () => { ref.current = null; container.innerHTML = ''; }; }, [ref]); return <div ref={containerRef}></div>; }, ); Editor.displayName = 'Editor'; export default Editor;