Skip to content

tiavina-mika/mui-tiptap-editor

Repository files navigation

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

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