After the Vite hot reload, I was unable to edit or input again, which resulted in me having to refresh the page every time to re edit

[immortal-oe]

`import React, { useState, useMemo, useCallback, useRef, useEffect } from 'react';
import { createEditor, Editor } from 'slate';
import { withHistory } from 'slate-history';
import { Editable, Slate, withReact } from 'slate-react';

export default function WordSubPage({ }) {
const editor = useMemo(() => withHistory(withReact(createEditor())), []);

// 初始内容
const initialValue = [
    { type: 'paragraph', children: [{ text: 'This is a second paragraph.' , }] }, // 嵌套的文本节点
];
// 渲染叶子节点，用于样式化文本
const renderLeaf = useCallback((props) => <Leaf {...props} />, []);

// 处理按键事件（加粗、斜体等快捷键）
const handleKeyDown = (event) => {
    if (event.ctrlKey) {
        switch (event.key) {
            case 'b': {
                event.preventDefault();
                toggleMark(editor, 'bold');
                break;
            }
            case 'i': {
                event.preventDefault();
                toggleMark(editor, 'italic');
                break;
            }
            case 'u': {
                event.preventDefault();
                toggleMark(editor, 'underline');
                break;
            }
            default:
                break;
        }
    }
};


return (
    <div className='word-sub-page'>
        <Slate editor={editor} initialValue={initialValue} onChange={(value) => console.log(value)}>
            <div style={{ border: '1px solid #ddd', padding: '10px', borderRadius: '5px' }}>
                <Editable
                    renderLeaf={renderLeaf}
                    onKeyDown={handleKeyDown}
                    placeholder="Type something..."
                    style={{ minHeight: '150px', outline: 'none' }}
                />
            </div>
            <Toolbar editor={editor} />
        </Slate>
    </div>
);

};

// 自定义叶子节点，用于渲染样式
const Leaf = ({ attributes, children, leaf }) => {
if (leaf.bold) {
children = {children};
}
if (leaf.italic) {
children = {children};
}
if (leaf.underline) {
children = {children};
}

return <span {...attributes}>{children}</span>;

};

// 工具栏组件
const Toolbar = ({ editor }) => {
return (
<div style={{ marginTop: '10px' }}>
<button onMouseDown={(event) => handleToolbarClick(event, editor, 'bold')}>Bold
<button onMouseDown={(event) => handleToolbarClick(event, editor, 'italic')}>Italic
<button onMouseDown={(event) => handleToolbarClick(event, editor, 'underline')}>Underline
<button onMouseDown={(event) => handleToolbarClick(event, editor, null)}>Clear

);
};

// 工具栏按钮处理逻辑
const handleToolbarClick = (event, editor, format) => {
event.preventDefault();
if (format) {
toggleMark(editor, format);
} else {
clearMarks(editor);
}
};

// 切换样式
const toggleMark = (editor, format) => {
const isActive = isMarkActive(editor, format);
if (isActive) {
Editor.removeMark(editor, format);
} else {
Editor.addMark(editor, format, true);
}
};

// 清除所有样式
const clearMarks = (editor) => {
Editor.removeMark(editor, 'bold');
Editor.removeMark(editor, 'italic');
Editor.removeMark(editor, 'underline');
};

// 检查样式是否激活
const isMarkActive = (editor, format) => {
const marks = Editor.marks(editor);
return marks ? marks[format] === true : false;
};
`

[zhugexiaogou666]

I encountered the same problem.