在 React 词法编辑器中实现类似 Gmail 的可折叠内容功能

问题描述 投票:0回答:1

我正在开发一个项目,使用 React 和 Lexical 创建一个类似于 Gmail 的电子邮件编辑器。我已经完成了词汇教程,实现了 H1-H6 的样式,添加了撤消/重做功能,并创建了引用块。我对 Lexical 的结构有了基本的了解。

到目前为止,我已经成功创建了一个功能,在单击 React 中的回复按钮时,会打开一个编辑屏幕,显示要回复的电子邮件的日期和其他信息节点,以及词汇引用节点。

但是,我正在努力实现类似于 Gmail 的“...”(省略号)的功能,该功能可以在单击时隐藏和显示回复电子邮件(引用块)的内容。我什至不确定这个功能通常被称为什么,或者如何在 React Lexical 编辑器中实现它。

我搜索了 Stack Overflow 并发现了一个相关问题(Is there an open-source JavaScript rich-text editorimilar to Gmail's?),但它已有 13 年历史,与我正在寻找的内容不太匹配。

我将非常感谢有关如何在 React Lexical 编辑器中实现此可折叠内容功能的任何指导、示例或参考。预先感谢您的帮助!

到目前为止我尝试过的:

  1. 完成了 Lexical 教程:我完成了 Lexical 教程,对其结构和功能有了基本的了解。
  2. 实现的基本功能:我添加了标题样式(H1-H6),实现了撤消/重做功能,并在词法编辑器中创建了引用块。
  3. React 回复按钮功能:我成功创建了一个功能,在 React 中单击回复按钮会打开一个编辑屏幕,显示电子邮件的信息节点和词汇引用节点。

我接下来期望实现的是类似 Gmail 的可折叠内容功能的实现。具体来说,我想在编辑器中添加一个省略号(“...”),单击该省略号时,将显示或隐藏回复电子邮件的内容(引用块)。这类似于 Gmail 允许用户展开或折叠回复中引用的文本的方式。

但是,我不确定如何在 React Lexical 编辑器中处理这个问题。我正在寻找有关如何实现此功能的指导或任何可以帮助我理解必要步骤的示例。

reactjs editor lexical
1个回答
0
投票

我现在已经成功解决了我的问题。简而言之,我为我想要隐藏的部分分配了适当的 HTML 类名称,并使用 CSS 使它们不可见。

仔细观察,Gmail 中的省略号被放置在编辑器框架之外,因此我还在框架之外放置了一个按钮,按下时会动态更改样式。

样式应用于 RichTextPlugin 的 contentEditable 选项中指定的 styledComponent。

这是一个相对简单的方法,但到目前为止对我来说效果很好,所以我将其留在这里记录。

我花了相当多的时间研究 LexicalComposer 的 Node state、exportDOM 等方面,但对于这个特定问题,这些知识不是必需的,可以通过 React 的基础知识来解决。

© www.soinside.com 2019 - 2024. All rights reserved.