Scroll issue

[qzzhujixue]

Description

I scroll to the bottom with the code, but there are pictures that flicker

Reproduction URL

No response

Reproduction steps

'use client';
import { useCallback, useEffect, useState } from 'react';

// 移除自定义转换函数的导入
// import { transformMarkdownToPlate } from './transform-rules';

// 接收编辑器实例作为参数
export const useWriting = (editor) => {
  const [isWriting, setIsWriting] = useState(false);
  const [content, setContent] = useState('');
  const [currentIndex, setCurrentIndex] = useState(0);
  const CHUNK_SIZE = 5; // 每次添加5个字符

  // 模拟从后端获取Markdown内容
  const fetchMarkdownContent = async (filename: string) => {
    try {
      // 在实际应用中，这里应该是一个API调用
      // 这里我们直接使用预设的内容作为示例
      const response = await fetch(`/api/markdown?filename=${filename}`);
      if (!response.ok) {
        throw new Error('获取内容失败');
      }
      const data = await response.text();
      return data;
    } catch (error) {
      console.error('获取Markdown内容失败:', error);
      return null;
    }
  };

  // 使用正确的类名滚动到编辑器底部
  const scrollToBottom = useCallback(() => {
    // 使用正确的类名获取编辑器容器
    const editorContainer = document.querySelector('.plate-editor-container');
    
    if (editorContainer) {
      // 滚动到底部
      editorContainer.scrollTop = editorContainer.scrollHeight;
    }
  }, []);

  // 开始流式输入
  const startWriting = useCallback(async (filename: string = '游戏：虚拟世界中的多元人生.md') => {
    if (isWriting || !editor) return;
    
    setIsWriting(true);
    
    try {
      // 为了演示，我们直接使用预设的内容
      const markdownContent = `# 游戏：虚拟世界中的多元人生

![游戏世界图片](https://p3-flow-imagex-sign.byteimg.com/ocean-cloud-tos/image_skill/5ba9e502-e021-4ff5-ba54-d5d43f674fdd_1742184031702091949_origin~tplv-a9rns2rl98-image-qvalue.jpeg?rk3s=6823e3d0&x-expires=1774086474&x-signature=cs6pxtzlqMKKs3cAlPiWTCB4WII%3D)

在当今社会，游戏早已突破了单纯娱乐的范畴，它宛如一扇通往无尽奇妙世界的大门，深刻地影响着我们的生活模式、思维逻辑以及社交互动。作为一名资深游戏玩家，同时也是游戏行业发展的见证者，今天想和大家分享我眼中游戏所蕴含的独特魅力与多元意义。

## 沉浸式体验：逃离现实的心灵港湾

生活的压力常常如汹涌潮水般袭来，而游戏则成为了我心灵的避风港。犹记初次踏入《塞尔达传说：旷野之息》的海拉鲁大陆，广袤无垠的草原、神秘深邃的遗迹、高耸入云的山峰，瞬间让我将现实世界的烦恼抛诸脑后。操控着林克，清晨骑马追逐朝阳，黄昏探索古老神庙的谜题，夜晚与怪物展开激战。这种沉浸式的体验，不只是视觉与听觉的极致享受，更是一场触动心灵的奇幻冒险。在游戏中，我们得以暂时摆脱日常的琐碎，步入一个充满无限可能的崭新世界，重新唤起对未知的好奇与探索的热忱。

## 思维挑战：虚拟世界中的智慧锤炼

游戏绝非仅仅是简单的感官刺激，其中还蕴藏着丰富的思维挑战。以《文明》系列为代表的策略游戏，玩家需要在复杂的政治、经济、文化和军事体系中审慎抉择，规划文明的发展轨迹。每一次决策都可能对游戏进程产生深远影响：是优先发展科技，提升生产力以稳固文明根基；还是扩充军事力量，通过征服周边国家拓展版图；亦或是借助文化传播，扩大文明的影响力？在这深度思考与权衡利弊的过程中，我们的战略思维、资源管理能力以及应对复杂状况的决策力都能得到充分锻炼。而像《纪念碑谷》这类解谜游戏，凭借巧妙的空间错觉和几何谜题，极大地挑战着我们的空间想象力与逻辑推理能力，让我们在突破思维定式的过程中，真切感受到智慧绽放的光芒。

## 社交纽带：跨越时空的情感桥梁

游戏也成为了连接人与人之间的关键纽带。在线多人游戏让我们得以与来自世界各地的玩家组队协作或展开竞技对抗。在《英雄联盟》的召唤师峡谷中，我结识了一群志同道合的队友，大家通过语音交流战术，为了一场胜利齐心协力。尽管我们身处不同城市，有着不同的职业和背景，但对游戏的热爱将我们紧紧相连。在游戏里，我们一同分享胜利的喜悦，也共同承受失败的挫折，这些共同经历进一步加深了彼此间的情谊。甚至在一些社交类游戏，比如《动物森友会》中，玩家们能在自己的小岛上与朋友互动，互相拜访、赠送礼物，营造出温馨和谐的社交氛围，让虚拟世界中的人际关系同样充满温情。

## 行业变革：技术与创意的精彩交融

从早期简单的像素游戏到如今画面逼真、剧情丰富的 3A 大作，游戏行业见证了技术与创意的飞速发展。图形渲染技术的革新，让游戏画面愈发贴近现实；物理引擎的优化，使得游戏中物体的运动更加真实自然；人工智能的应用，为游戏中的敌人赋予了更为智能的行为模式。与此同时，游戏开发者们的创意源源不断，新颖的游戏玩法与题材不断涌现。独立游戏的兴起，更是为小众创意搭建了展示的舞台，许多极具个性与深度的作品在玩家群体中口口相传。游戏行业的蓬勃发展，不仅为我们带来了更优质的游戏体验，还推动了相关技术在影视特效、虚拟现实等其他领域的广泛应用。

游戏，这一虚拟世界，以其独特魅力，为我们带来了丰富多彩的体验，塑造了我们的思维方式，连接了人与人之间的情感，展现了科技与创意融合的无限潜力。它早已超越了娱乐的范畴，成为一种文化、一种生活方式。只要合理安排时间，游戏便能为我们的生活增添一抹绚丽色彩，让我们在虚拟与现实之间找到平衡，尽情体验多元人生。`;
      
      if (!markdownContent) {
        setIsWriting(false);
        return;
      }
      
      setContent(markdownContent);
      setCurrentIndex(0);
      
      // 清空编辑器内容
      if (editor) {
        editor.deleteFragment();
      }
      
    } catch (error) {
      console.error('流式输入启动失败:', error);
      setIsWriting(false);
    }
  }, [isWriting, editor]);

  // 停止流式输入
  const stopWriting = useCallback(() => {
    setIsWriting(false);
  }, []);

  // 处理流式输入效果
  useEffect(() => {
    if (!isWriting || !content || !editor) return;
    
    if (currentIndex >= content.length) {
      setIsWriting(false);
      return;
    }
    
    const timer = setTimeout(() => {
      // 计算本次要添加的字符数量
      const remainingChars = content.length - currentIndex;
      const charsToAdd = Math.min(CHUNK_SIZE, remainingChars);
      const nextIndex = currentIndex + charsToAdd;
      
      // 获取当前累积的内容
      const currentContent = content.substring(0, nextIndex);
      
      // 使用编辑器的 Markdown API 进行转换
      if (editor.api && editor.api.markdown) {
        // 使用 Plate 内置的 Markdown 转换功能
        const plateNodes = editor.api.markdown.deserialize(currentContent);
        editor.children = plateNodes;
        editor.onChange();
      } else {
        console.warn('编辑器没有 Markdown API，请确保已配置 MarkdownPlugin');
      }
      
      setCurrentIndex(nextIndex);
      
      // 在内容更新后滚动到底部
      // 使用setTimeout确保DOM已更新
      setTimeout(scrollToBottom, 10);
      
    }, 10); // 保持较快的速度
    
    return () => clearTimeout(timer);
  }, [isWriting, content, currentIndex, editor, CHUNK_SIZE, scrollToBottom]);

  return {
    isWriting,
    progress: content ? (currentIndex / content.length) * 100 : 0,
    startWriting,
    stopWriting
  };
};

Plate version

44

Slate React version

44

Screenshots

Logs

Browsers

No response

[felixfeng33]

你能录个视频看看具体问题吗

[qzzhujixue]

3.21.2.mp4

大佬，有啥办法吗？或者demo

[felixfeng33]

你这是每次都把内容清空了吗

这样性能不好 而且会有这种问题，

最好的方法是每次insert的时候将markdown转为slate节点，但是有很多case不太好处理，我目前正在解决这个问题。

[qzzhujixue]

大佬，我对slate不是太熟，后面有思路，到时候跟我说下 O(∩_∩)O

[qzzhujixue]

大佬，更新node节点，是用哪个方法呀，editor.children = plateNodes;好像没有node key了，我打印了editor对象，下面好像有setNodes方法，是这个吗？

[felixfeng33]

是的 editor.tf.setNodes

[qzzhujixue]

editor.tf.setNodes 大佬，为啥我使用这个方法，没变化呢，页面