I want to give suggestions to users when user click on a tip-tap editor. the suggestion will be some preloaded text. if the user like that suggestion then he could be saved that suggestion in his database by clicking on enter or the right arrow key button on the keypad.
1 Answer
You could use a Floating Menu
as in the example in docs and use insert content.
{
editor && (
<FloatingMenu editor={editor} tippyOptions={{ duration: 100 }}>
<button
onClick={() => editor.chain().focus().insertContent("hello").run()}
>
hello
</button>
<button
onClick={() => editor.chain().focus().insertContent("world").run()}
>
world
</button>
</FloatingMenu>
);
}
<EditorContent editor={editor} />
Note that you might need to play around with shouldShow
prop.
Floating menu
?