类似Notion的编辑器

大家好,

随着我们继续熟悉和使用 Discourse,我意识到在过去几年我用过的所有论坛软件中,编辑器是我最喜欢的。但是,我认为
我推荐的是一个基于块的编辑器,您可以使用“/”来触发快捷方式。例如 Notion 和 Tiptap 编辑器。

这是 Marktext 的截图,它是我最喜欢的桌面开源 Markdown 编辑器之一:

许多 Markdown 编辑器正朝着块快捷方式的方向发展,我认为 Discourse 在形式和功能上都可以从这种概念中受益。

13 个赞

我认为要让它完美运行需要大量的工作。

大致相关的是,很久以前创建并讨论过一个现在已损坏的所见即所得编辑器插件:

3 个赞

是的,在发布此内容之前我刚看了看,只是想把它变成一个正式的请求。

我注意到 @sam 说,早在 2022 年 10 月就已经有“计划™”在进行中了。

3 个赞

我刚发现一个开源库,可以实现类似 Notion 的命令。我不确定将其集成到 Discourse 中有多容易,但还是想发帖,以防其他人有想法:

6 个赞

这看起来是基于 https://tiptap.dev/ 构建的,而它已经关闭了?

1 个赞

据我所知,Tiptap 是开源的:

3 个赞

我明白了,专业扩展是收费的。

这里最大的棘手之处在于双向。Markdown <=> HTML 的桥接。我希望在任何这方面的实验中都避免放弃 Markdown。

5 个赞

TipTap 是 ProseMirror 的一个包装器:https://prosemirror.net/。

2 个赞

同意。

我主要将其作为一个例子链接,我认为在这个领域进行实验是值得的,但我还不确定它在技术层面上如何运作,特别是当目标之一是不放弃 Markdown 到 HTML 的转换时。

我相信我仍然对这件事持积极态度,就像我在 2023 年 7 月创建该主题时一样,因为我现在使用的几乎所有涉及写作的应用程序都具有类似的功能。

我将在未来几周内对此进行更多思考,如果我想出任何东西,我会回来发帖。

至少,它应该包括某种键盘方法,例如输入“/”或其他指定符号,该符号会调出一个无缝的选择面板,用于插入格式以及 Discourse 认为有价值的内容,例如 Notion、Tiptap 等。

1 个赞

看起来 ProseMirror 使用 Discourse (https://discuss.prosemirror.net/),所以他们可能对此有一些看法。我还看到他们有一个 Markdown 集成,但我不知道这是否与 Sam 谈论的内容一致,只是想包含进来,以防人们想做更多研究。

3 个赞

它的创建者在 Meta 上也有一个账号。我不会在这里提及他,但他写了一本很棒的 JavaScript 书:https://eloquentjavascript.net/。

据我所知,将当前的 Discourse 编辑器切换到基于 prosemirror 的编辑器将是一项非常复杂的任务。

2 个赞

我对这个话题的建议并不是要使用 tiptap,它只是一个例子。我推荐的是块编辑体验。

2 个赞

此编辑器似乎开箱即用地支持 Markdown ↔ HTML 转换:

2 个赞

@thoka 我从你给的链接测试了一下。它确实运行得很好。很高兴能在 discourse 中看到这个编辑器。希望未来会有这样的改变。

嗯。乍一看似乎有效。
一个合适的编辑器至少必须支持任何 discourse markdown → html/editor state → markdown 的无损往返转换。

链接的演示在此失败,例如,在对齐的表格上。

3 个赞

我还没在表格上试过。如果开发继续,这个问题也可以得到解决。

也许值得看看 Meta 的 Lexical 编辑器:https://lexical.dev/docs/intro。它可以支持双向 markdown 到 html 的桥接:https://lexical.dev/docs/packages/lexical-markdown。

我在文档中没有找到太多入门的东西,但从 Lexical Playground 代码倒推会有帮助,至少在 React 应用的上下文中是这样。

8 个赞

当然,@renato 已经尝试过,这是一个庞大的项目,但我们对此非常感兴趣。

8 个赞

目前 Discourse 在其底层数据格式中混合使用了 markdown、bbcode 和 HTML。是否存在朝着更统一的格式发展的计划?

关于实验:任何可视化编辑器至少都应该是幂等的(加载时源文件不变,不做编辑,保存),并且是局部独立的(只在已编辑的源文件部分进行更改),这是常识吗?

3 个赞

Invision 宣布 TipTap 为其新编辑器:

https://invisioncommunity.com/news/invision-community/invision-community-5-the-all-new-editor-r1301/

3 个赞