mui-tiptap-editor

mui-tiptap-editor!

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

Files

StackEdit stores your files in your browser, which means all your files are automatically saved locally and are accessible offline!

Table of Contents

• Demo

• Installation

• Get started

• Use the all-in-one component

• Create and provide the editor yourself

• Render read-only rich text content

• mui-tiptap extensions and components

• Tiptap extensions

• HeadingWithAnchor

• FontSize

• LinkBubbleMenuHandler

• ResizableImage

• TableImproved

• Components

• Controls components

• Localization

• Tips and suggestions

• Choosing your editor extensions

• Extension precedence and ordering

• Other extension tips

• Drag-and-drop and paste for images

• Re-rendering RichTextEditor when content changes

• Contributing

Installation

npm  install  mui-tiptap-editor

or

yarn  add  mui-tiptap-editor

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>
  );
}

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

Customization

Toolbar

Can display the menus as needed

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

  function App() {
    return (
      <TextEditor toolbar={['bold', 'italic', 'underline']} />
    );
  }

Styles

Root styles

import './index.css';

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

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

/* ./index.css */
.my-tab.MuiTab-root.Mui-selected {
  background-color: pink !important;
}

.my-label {
  color: blue !important;
}

.my-input {
  border: 1px solid green;
}

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, ai	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
value	string	empty	Value of the input
onChange	(value: string) => void	empty	Function to call when the input change
...all tiptap features	EditorOptions	empty	Can access to all tiptap useEditor props