Lobby Editor

A familiar, plug and play, extendable rich text editor for Vercel's Next React framework, based on ProseMirror, built using TipTap. This project grew out of our internal usage at Lobby and works best when using the Next framework.

Install

Have a fully functioning editor for your project in no time. First, install using

 npm install "@tiptap/[email protected]" "@tiptap/[email protected]" remixicon lobby-editor

or if you are using yarn

yarn add "@tiptap/[email protected]" "@tiptap/[email protected]" 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.

⚠️ Lobby Editor was spun out of a NextJS project at Lobby. It may be compatible with React but works best with NextJS.

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";

Add the following to your TailwindCSS config:

  content: [
    ...
    "./node_modules/lobby-editor/**/*.js",
  ],

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

1. 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