You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am trying to make my own editor with TipTap. I find it unconventional, that the user has to scroll to the change something (font size, bold, etc) and don't see why create a BubbleMenu, when it all is at the top.
Is there a way to make the slotBefore thing fixed relative to the parent?
This is my code:
function MenuBar(){
const {editor} = useCurrentEditor()
if (!editor) {
return null
}
return (
<div style={{display: 'flex', flexDirection: 'row', height: '30px', }}>
<button
onClick={() => editor.chain().focus().toggleBold().run()}
disabled={
!editor.can()
.chain()
.focus()
.toggleBold()
.run()
}
className={editor.isActive('bold') ? 'active' : ''}
>
<strong>B</strong>
</button>
</div>
)
}
const extensions = [
Color.configure({ types: [TextStyle.name, ListItem.name] }),
TextStyle.configure({ types: [ListItem.name] }),
StarterKit.configure({
bulletList: {
keepMarks: true,
keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
},
orderedList: {
keepMarks: true,
keepAttributes: false, // TODO : Making this as `false` becase marks are not preserved when I try to preserve attrs, awaiting a bit of help
},
}),
]
export function Element_TextEditor(){
return (
<div style={{ width: '100%', height: '100%', borderRadius: '15px', padding: '5px', display: 'flex', flexDirection: 'column', overflow: 'scroll', }}>
<EditorProvider slotBefore={<MenuBar value={value || ''} SetEditor={SetEditor} />} extensions={extensions}></EditorProvider>
</div>
);
}
I want the MenuBar to be fixed to the parent div. The goal is to be able to scroll inside the texteditor itself, without the MenuBar scrolls, but stays in place.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
I am trying to make my own editor with TipTap. I find it unconventional, that the user has to scroll to the change something (font size, bold, etc) and don't see why create a BubbleMenu, when it all is at the top.
Is there a way to make the slotBefore thing fixed relative to the parent?
This is my code:
I want the MenuBar to be fixed to the parent div. The goal is to be able to scroll inside the texteditor itself, without the MenuBar scrolls, but stays in place.
Just like the editor in GitHub:
Thanks:)
Beta Was this translation helpful? Give feedback.
All reactions