0.11.6 • Published 8 months ago

mui-tiptap-editor v0.11.6

Weekly downloads
-
License
MIT
Repository
-
Last release
8 months ago

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

  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

propstypeDefault valueDescription
toolbarstring[]heading, bold, italic, strike, link, underline, image, code, orderedList, bulletList, align, codeBlock, blockquote, table, history, youtube, color, mention, aiThe list of the menu buttons to be displayed
placeholderstringemptyinput placeholder
labelstringemptyinput label
errorstringemptyError message to display
withFloatingMenubooleanfalseShow or hide the floating menu
withBubbleMenubooleantrueShow or hide the bubble menu
inputClassNamestringemptyOverride input styles
toolbarClassNamestringemptyOverride the toolbar menu styles
tabsClassNamestringemptyOverride the tabs (preview, editor) styles
tabClassNamestringemptyOverride the tab (preview or editor) styles
errorClassNamestringemptyOverride the error message styles
rootClassNamestringemptyOverride the main container styles
labelClassNamestringemptyOverride the label styles
bubbleMenuToolbarstring[]['bold', 'italic', 'underline', 'link']Similar to toolbar props
floatingMenuToolbarstring[]['bold', 'italic', 'underline', 'link']Similar to toolbar props
valuestringemptyValue of the input
onChange(value: string) => voidemptyFunction to call when the input change
...all tiptap featuresEditorOptionsemptyCan access to all tiptap useEditor props
0.9.30

8 months ago

0.9.31

8 months ago

0.9.32

8 months ago

0.9.33

8 months ago

0.9.24

8 months ago

0.9.25

8 months ago

0.9.26

8 months ago

0.10.0

8 months ago

0.9.27

8 months ago

0.9.28

8 months ago

0.9.29

8 months ago

0.11.0

8 months ago

0.11.1

8 months ago

0.11.2

8 months ago

0.11.3

8 months ago

0.11.4

8 months ago

0.11.5

8 months ago

0.11.6

8 months ago

0.9.23

9 months ago

0.9.20

9 months ago

0.9.21

9 months ago

0.9.22

9 months ago

0.9.19

9 months ago

0.4.8

1 year ago

0.7.2

1 year ago

0.3.6

1 year ago

0.3.5

1 year ago

0.7.4

1 year ago

0.3.8

1 year ago

0.7.3

1 year ago

0.3.7

1 year ago

0.7.0

1 year ago

0.9.8

12 months ago

0.9.7

1 year ago

0.4.21

1 year ago

0.9.9

12 months ago

0.9.4

1 year ago

0.9.3

1 year ago

0.9.6

1 year ago

0.9.5

1 year ago

0.4.26

1 year ago

0.4.27

1 year ago

0.4.24

1 year ago

0.4.25

1 year ago

0.4.22

1 year ago

0.4.23

1 year ago

0.8.0

1 year ago

0.4.4

1 year ago

0.4.7

1 year ago

0.4.1

1 year ago

0.4.3

1 year ago

0.4.2

1 year ago

0.9.12

12 months ago

0.9.13

12 months ago

0.9.14

12 months ago

0.9.15

12 months ago

0.9.10

12 months ago

0.9.11

12 months ago

0.9.16

11 months ago

0.9.17

11 months ago

0.9.18

11 months ago

0.9.0

1 year ago

0.5.4

1 year ago

0.5.3

1 year ago

0.9.2

1 year ago

0.5.0

1 year ago

0.5.2

1 year ago

0.5.1

1 year ago

0.7.6

1 year ago

0.7.5

1 year ago

0.3.9

1 year ago

0.3.91

1 year ago

0.3.83

1 year ago

0.3.82

1 year ago

0.3.81

1 year ago

0.6.1

1 year ago

0.6.0

1 year ago

0.1.74

1 year ago

0.1.75

1 year ago

0.1.76

1 year ago

0.1.77

1 year ago

0.1.78

1 year ago

0.1.79

1 year ago

0.1.71

1 year ago

0.1.72

1 year ago

0.1.73

1 year ago

0.1.85

1 year ago

0.1.86

1 year ago

0.1.87

1 year ago

0.1.81

1 year ago

0.1.83

1 year ago

0.1.84

1 year ago

0.2.0

1 year ago

0.1.8

1 year ago

0.1.7

1 year ago

0.1.9

1 year ago

0.3.2

1 year ago

0.3.1

1 year ago

0.3.4

1 year ago

0.1.6

1 year ago

0.3.3

1 year ago

0.1.52

1 year ago

0.1.53

1 year ago

0.3.0

1 year ago

0.4.0

1 year ago

0.1.4

1 year ago

0.1.5

1 year ago

0.1.31

1 year ago

0.1.32

1 year ago

0.1.34

1 year ago

0.1.35

1 year ago

0.1.36

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.0.9

1 year ago

0.0.8

1 year ago

0.1.3

1 year ago

0.0.7

1 year ago

0.0.6

1 year ago

0.0.5

1 year ago

0.0.4

1 year ago