Comments (11)
I will try to tackle this problem on Thursday. My hacky way to preserve line breaks and format previously was to put text in blackquote onFinish
onFinish: (_prompt, completion) => {
if (!editor) return
const from = editor.state.selection.from - completion.length
const to = editor.state.selection.from
const text = editor.state.doc.textBetween(from, to)
editor
?.chain()
.deleteRange({ from, to })
.insertContent({ type: 'paragraph', content: [{ type: 'text', text: text }] })
.setBlockquote()
.run()
},
from novel.
That would have issue too. Previously, the gtp response would have a nice format but any editing of the response would cause the text to lose all the line break. I could not find a solution to that problem at the moment.
from novel.
Removed markdown formatting from the prompt for now until we figure out a solution for this: 97b0c49
from novel.
@steven-tey I came close with a solution.
//temporarily escape markdown syntax as stream coming in
useEffect(() => {
const diff = completion.slice(prev.current.length);
prev.current = completion;
// Escape markdown syntax
const escapedDiff = diff.replace(/([#*_{}[\]()`~>#+-.!|])/g, '\\$1');
// Replace the content in the editor with the escaped markdown
editor?.commands.setContent(escapedDiff, false);
}, [isLoading, editor, completion]);
\\ parse it again onFinish
onFinish: (_prompt, completion) => {
if (!editor) return
console.log('π ~ file: Editor.tsx:116 ~ Editor ~ completion:', completion)
const from = editor.state.selection.from - completion.length
const to = editor.state.selection.from
// Replace the current content in the editor with the completion, parsed as Markdown
editor.commands.setContent(completion, false);
},
The problem is setContent would work but not insertContent. setContent replaces everything. Maybe someone with better knowledge with tiptap would know what to do here.
from novel.
yeah, tiptap markdown does not play nice with streamed response. You either need to escape all the markdown syntax while streaming then set it again or just no using markdown at all. I delete the markdown plugin because the markdown was just too unpredictable.
from novel.
Yeahhh I noticed that too β might need to coerce that to plaintext for now
from novel.
@jt6677 yeah that's smart! The root of the issue is streaming response doesn't play well with the way they're converted into markdown by tiptap-markdown
βΒ the maintainer of the lib, @aguingand confirmed that as well!
Setting everything with setContent
when the response finishes streaming would work, but it becomes a blocking response and defeats the purpose of streaming: #7 (reply in thread)
from novel.
@jt6677 ended up doing the same thing.
I stream the content. Then when the streaming finishes, I set it. Will work for now.
from novel.
@steven-tey, really appreciate your work. From Vercel's Platforms Starter Kit to this awesome UI editor!
Format gets broken as the generated markdown text streams into the editor. Solution is replacing the whole content iteratively instead of just inserting the diff
so instead of
const prev = useRef("");
// Insert chunks of the generated text
useEffect(() => {
const diff = completion.slice(prev.current.length);
prev.current = completion;
editor?.commands.insertContent(diff);
}, [isLoading, editor, completion]);
remove the last appended completion + append the whole new completion again to let the editor fix the formatting:
const prev = useRef("");
useEffect(() => {
// reset prev when `complete` is called again
if (prev?.current.length > completion.length) {
prev.current = ""
}
editor?.chain()
.deleteRange({
from: editor.state.selection.from - prev.length,
to: editor.state.selection.from,
})
.insertContent(completion)
.run()
}, [editor, completion])
from novel.
@andrewdoro This issue is likely resolved by the new AI implementation since it's not streamed into the editor directly.
from novel.
@haydenbleasel Yep thanks for the tag here. So the new AI implementation works with Markdown. We no longer have a working example for the old ++
implementation where we stream directly in the editor. (if someone wants to work with that, the current AI code might help).
I also recommend the new approach. This is what Notion also uses.
from novel.
Related Issues (20)
- bug: Cannot find module 'novel/extensions' or its corresponding type declarations. HOT 6
- feat: Add image by link & embed video by iframe or link from Vimeo/YouTube HOT 2
- feat: Updated Drag Handle
- bug: ++ is not working on demo HOT 2
- bug: #361 caused a regression of #350 HOT 3
- bug: Please update the docs as per the latest published version of package 0.3.1
- bug: slash command isn't scrollable or clickable with mouse
- feat: high-light syntax on a code-block
- feat:
- feat: Overwrite the `simpleExtensions` especially the markdown config HOT 3
- bug: cannot remove a selected link in the bubble menu
- bug: yarn novel can't find novel/extensions module HOT 1
- Need help running the example.
- feat: table support
- TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))bug: HOT 3
- feat: Can drag custom react components
- Can't access to the editor instance to change content programmatically HOT 2
- β TS Errors need to be fixed on null of editor for lastest version of Novel HOT 2
- πbug: editable={false} doesn't prevent editing content HOT 1
- feat: Possibility to await a slash command and display a loading spinner?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. πππ
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google β€οΈ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from novel.