Package Exports

mui-tiptap-editor
mui-tiptap-editor/dist/index.cjs.js
mui-tiptap-editor/dist/index.es.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (mui-tiptap-editor) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

mui-tiptap-editor

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

Demo
Installation
Get started
Customization
Props
Contributing

Demo

Try it yourself in this CodeSandbox live demo or see the Demo video

Installation

npm  install  mui-tiptap-editor

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

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.

Customization

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 './index.css';
import { TextEditor } from 'mui-tiptap-editor';

function App () {
  return (
    <TextEditor
      value="<p>Hello word!</p>"
      label="Content"
      tabClassName="my-tab"
      labelClassName="my-label"
      inputClassName="my-input"
      toolbarClassName="my-toolbar"
    />
  )
}

/* ./index.css */
.my-tab.MuiTab-root.Mui-selected {
  background-color: pink !important;
}
.my-label {
  color: blue !important;
}
.my-input {
  border: 1px solid green;
}
.my-toolbar {
  background-color: yellow;
}

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.