ChatGPTNextWeb / ChatGPT-Next-Web

A cross-platform ChatGPT/Gemini UI (Web / PWA / Linux / Win / MacOS). 一键拥有你自己的跨平台 ChatGPT/Gemini 应用。
https://app.nextchat.dev/
MIT License
76.68k stars 59.19k forks source link

[Feature Request] 将输入框改造为contenteditable的 div,方便有格式化问题输入 #5443

Open Leizhenpeng opened 2 months ago

Leizhenpeng commented 2 months ago

🥰 Feature Description

用户在使用 NextChat 时,输入的问题格式(如脑图、列表等)具有重要意义,但目前系统仅支持纯文本,导致排版信息丢失,影响用户体验和信息传达的准确性。

🧐 Proposed Solution

参考 claude 和 chatgpt, 将输入框改造成 contenteditable 的 div

image

📝 Additional Information

可以使用这个库

https://github.com/lovasoa/react-contenteditable

Issues-translate-bot commented 2 months ago

Bot detected the issue body's language is not English, translate it automatically.


Title: [Feature Request] Transform the input box into a contenteditable div to facilitate input with formatting issues

🥰 Feature Description

When users use NextChat, the format of the questions they input (such as mind maps, lists, etc.) is of great significance, but currently the system only supports plain text, resulting in the loss of formatting information and affecting the user experience and the accuracy of information transmission.

🧐 Proposed Solution

Refer to claude and chatgpt to transform the input box into a contenteditable div.

image

📝 Additional Information

You can use this library

https://github.com/lovasoa/react-contenteditable

lloydzhou commented 1 month ago

@Dogtiti 做这个功能的时候,可以考虑和插件部分的schema编辑一起处理。

现在插件那边是一个最简单的逻辑(使用markdown渲染,让渲染结果支持contenteditable)

Issues-translate-bot commented 1 month ago

Bot detected the issue body's language is not English, translate it automatically.


@Dogtiti When doing this function, you can consider processing it together with the schema editing in the plug-in part. Now the plug-in has the simplest logic (use markdown rendering to make the rendering result support contenteditable)

lloydzhou commented 1 month ago

前面的截图显示:claude应该使用了ProseMirror 而不是 react-contenteditable image

Issues-translate-bot commented 1 month ago

Bot detected the issue body's language is not English, translate it automatically.


The previous screenshot shows: claude should use ProseMirror instead of react-contenteditable image