拖拽后React Tinymce编辑器内容消失且无法聚焦问题求助

使用的依赖包 #

• react-beautiful-dnd
• tinymce-react

问题详情 #

我尝试实现拖拽排序Tinymce编辑器的功能，编辑器默认内容直接取自列表数据，未使用单独状态管理。但拖拽完成后，所有编辑器都无法再次聚焦，控制台也没有任何错误提示。

我在禁用SSR的Next.js环境中测试，问题依然存在；最初是在InertiaJs环境中发现的，原本以为是InertiaJS或Vite的问题，但全新搭建的Next.js项目也出现同样情况。不过在CodePen上运行相同代码却能正常工作，原因不明。

完整实现代码 #

const Home = () => {
  const [items, setItems] = useState([
    {
      id: "one",
      content: "Item 1",
    },
    {
      id: "two",
      content: "Item 2",
    },
    {
      id: "three",
      content: "Item 3",
    },
  ]);
  const contentRefs = useRef([]);
  const onDragEnd = (result) => {
    const newItems = Array.from(items);
    const [removed] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, removed);
    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={onDragEnd}>
      <Droppable droppableId="droppable">
        {(provided) => (
          <div {...provided.droppableProps} ref={provided.innerRef}>
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided, snapshot) => (
                  <div
                    snapshot={snapshot}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    ref={provided.innerRef}
                  >
                    <Editor
                      onInit={(evt, editor) =>
                        (contentRefs.current[index] = editor)
                      }
                      value={item.content}
                      init={{
                        height: 200,
                      }}
                      onChange={(e) =>
                        handleItemContent(e.target.getContent(), index)
                      }
                    />
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default dynamic(() => Promise.resolve(Home), {
  ssr: false,
});

状态截图 #

拖拽前状态：

拖拽后状态：

使用版本 #

• React 18
• Next.js 14.0.4
• react-beautiful-dnd 13.1.1
• Tinymce 4.3.2

内容的提问来源于stack exchange，提问作者Naung Ye Htet