Feature Request: Remove forced editor rendering in EditorProvider #4738
seleckis
started this conversation in
Feature Requests
Replies: 1 comment
-
I agree, it's impossible to wrap the actual For anyone encountering this issue, here's my workaround, which creates a custom import {
useEditor,
EditorContent,
EditorContext,
EditorConsumer,
useCurrentEditor,
} from "@tiptap/react";
const CustomEditorProvider = ({ children, ...editorOptions }) => {
const editor = useEditor(editorOptions);
if (!editor) {
return null;
}
return (
<EditorContext.Provider value={{ editor }}>
{children}
</EditorContext.Provider>
);
};
const CustomEditorContent = () => (
<EditorConsumer>
{({ editor: currentEditor }) => <EditorContent editor={currentEditor} />}
</EditorConsumer>
);
const Toolbar = () => {
const { editor } = useCurrentEditor();
// render your buttons here...
};
// Here you can customize your own layout for the toolbar and content
const MyRichTextEditor = () => (
<CustomEditorProvider content={content} extensions={extensions}>
<div classname="rich-text-container">
<div className="rich-text-toolbar">
<Toolbar />
</div>
<div classname="rich-text-content">
<CustomEditorContent />
</div>
</div>
</CustomEditorProvider>
); Toolbar buttons are correctly using the editor context to read |
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
According to 4192 we have now EditorProvider. It gives an opportunity to access editor for all children. Here comes the problem if we need to render editor in our own way, because EditorProvider renders EditorContent and does not allow to do it ourselves. The only way to customize the editor is to add slots above and bellow the editor content.
I would like to suggest to remove any forced rendering inside EditorProvider and let it just to provide
editor
in context. In this case I would render editor like this:Use Case
EditorContent could be wrapped and styled using for example styled-components.
Another benefit is the possibility to place EditorProvider much higher in the hierarchy, so other app components could access editor.
I know that I can create such context provider by myself using useEditor, but in this case I don't understand the benefit of existing EditorProvider.
Type
Other
Beta Was this translation helpful? Give feedback.
All reactions