Lobby Editor
A familiar, plug and play, extendable rich text editor for React, based on ProseMirror, built using TipTap
Install
Have a fully functioning editor for your project in no time. First, install using
npm install "@tiptap/core@2.0.0-beta.174" "@tiptap/react@2.0.0-beta.114" remixicon lobby-editor
or if you are using yarn
yarn add "@tiptap/core@2.0.0-beta.174" "@tiptap/react@2.0.0-beta.114" remixicon lobby-editor
Peer Dependencies
Lobby editor requires peer dependencies
"@tiptap/core": "2.0.0-beta.174",
"@tiptap/react": "2.0.0-beta.114",
Note
To use the BubbleMenu that comes with our editor Tailwind must be installed.
Usage
Use as desired in your project like below
import { useLobbyEditor, LobbyEditor } from "lobby-editor"
const App = () => {
const editor = useLobbyEditor();
return (
<div className="App">
<LobbyEditor editor={editor} editable={true} />
</div>
)
}
export default App
Congrats! You should now have the lobby editor running!
Styling
In your App.js import styling or if you are using Next.js import in your _app.js
Install RemixIcon
import "lobby-editor/dist/es/styles.css";
import "remixicon/fonts/remixicon.css";
Extensions
Let's now have a look at adding some custom extensions.
Define your custom extension.
// 1. Import the extension
import BulletList from '@tiptap/extension-bullet-list'
// 2. Overwrite the keyboard shortcuts
const CustomBulletList = BulletList.extend({
addKeyboardShortcuts() {
return {
'Mod-l': () => this.editor.commands.toggleBulletList(),
}
},
})
Next pass it to createLobbyEditor
like this
let editor = useLobbyEditor({
customExtensions: [
CustomBulletList(),
...
]
})
Have a look at the getting started to see more example.
Note
- setContent needs to be inside a useEffect because every time the editor is typed in/updated it rerenders the entire component and setContent will be called indefinitely
Further Documentation
See More in Lobby.
Contributions
Contributions and recommendations are always welcome! Open an issue or discussion in GitHub and outline your ideas. Our team will promptly provide feedback.
Code linting
An eslint config ensures a consistent code style. To check for errors, run
yarn lint
or
npm run lint
Make sure it’s passing before sending a pull request.
Further Questions?
Message us in Discord or Create a discussion on GitHub
Community
For help, discussion about best practices, or any other conversation that would benefit from being searchable: Discuss Lobby on GitHub
Meet the team and introduce yourself to other devs in the community: Discuss Lobby on Discord