JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 96
  • Score
    100M100P100Q75004F
  • License MIT

Easy to use Tiptap WYSIWYG rich text editor using Material UI (MUI) for React

Package Exports

  • mui-tiptap-editor
  • mui-tiptap-editor/icons

Readme

mui-tiptap-editor

A customizable and easy to use Tiptap styled WYSIWYG rich text editor, using Material UI.

NPM Version Language

Table of Contents

Demo

Screenshot

Installation

npm install mui-tiptap-editor

or

yarn add mui-tiptap-editor

Please note that @mui/material (and their @emotion/ peers) are peer dependencies, meaning you should ensure they are installed before installing mui-tiptap-editor.

npm install @mui/material @emotion/react @emotion/styled

or

yarn add @mui/material @emotion/react @emotion/styled

Get started

Simple usage

import { TextEditor, TextEditorReadOnly } from 'mui-tiptap-editor';
import { useState } from "react";

function App() {
  const [value, setValue] = useState<string>("");

  const handleChange = (newValue: string) => setValue(newValue);

  return (
    <div>
      <TextEditor value={value} onChange={handleChange} />
      {value && <TextEditorReadOnly value={value} />}
    </div>
  );
}

Using mentions

import { TextEditor, ITextEditorOption } from 'mui-tiptap-editor';

const mentions: ITextEditorOption[] = [
  { label: "Lea Thompson", value: "id1" },
  { label: "Cyndi Lauper", value: "id2" },
  { label: "Tom Cruise", value: "id13" },
];

const currentUser: ITextEditorOption = mentions[0];

function App() {
  return (
    <TextEditor mentions={mentions} user={currentUser} userPathname="/profile" />
  );
}

See example/App.tsx for a more thorough example of using TextEditor.

Read only

  1. If using the editor
import { TextEditorReadOnly } from 'mui-tiptap-editor';

<TextEditorReadOnly value="<h1>Hello word!</h1>" />
  1. If it's just to display the value without using the editor, you can use this tiptap-parser library. Example: The editor is used in the back office, but the content is to be displayed on the website
import TiptapParser from "tiptap-parser";

const html = `<h1>Hello world</h1>`;

function App() {
  return (
    <TiptapParser content={html} />
  );
}

Customization

Toolbar

Can display the menus as needed

  <TextEditor toolbar={['bold', 'italic', 'underline']} />

Styles

Root styles

import './index.css';
import { TextEditor } from 'mui-tiptap-editor';

function App () {
  return (
    <TextEditor
      value="<p>Hello word!</p>"
      rootClassName="root"
    />
  )
}
/* ./index.css */
.root {
  background-color: #fff;
}
.root  .MuiTab-root.Mui-selected {
  background-color: yellow  !important;
}

Each element styles

import { TextEditor } from 'mui-tiptap-editor';

function App () {
  return (
    <TextEditor
      value="<p>Hello word!</p>"
      label="Content"
      tabClassName="bg-black"
      labelClassName="text-sm"
      inputClassName="border border-gray-200"
      toolbarClassName="bg-gray-500"
    />
  )
}

Props

props type Default value Description
toolbar string[] heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention The list of the menu buttons to be displayed
placeholder string empty input placeholder
label string empty input label
error string empty Error message to display
withFloatingMenu boolean false Show or hide the floating menu
withBubbleMenu boolean true Show or hide the bubble menu
inputClassName string empty Override input styles
toolbarClassName string empty Override the toolbar menu styles
tabsClassName string empty Override the tabs (preview, editor) styles
tabClassName string empty Override the tab (preview or editor) styles
errorClassName string empty Override the error message styles
rootClassName string empty Override the main container styles
labelClassName string empty Override the label styles
bubbleMenuToolbar string[] ['bold', 'italic', 'underline', 'link'] Similar to toolbar props
floatingMenuToolbar string[] ['bold', 'italic', 'underline', 'link'] Similar to toolbar props
mentions ITextEditorOption[] undefined List of users to be mentioned when entering or selecting @
user ITextEditorOption undefined Current user
value string empty Value of the input
onChange (value: string) => void - Function to call when the input change
userPathname boolean /user URL pathname for the mentioned user (eg: /user/user_id)
...all tiptap features EditorOptions empty Can access to all tiptap useEditor props

Contributing

Get started here.