Simple Rich Text Editor

A simple text input for react applications which can change your input text into bold, italic, strikethrough , and more. This package wouldn't been possible to make without @tiptap/react

Installation

Install Simple Rich Text Editor with npm

  npm i simple-rich-text-editor

Usage

  import { useState } from "react";
  import { RichTextEditor } from "simple-rich-text-editor";
  import "./App.css";


  export default function App() {
  const [data, setData] = useState("");
  return (
       <div>
       <RichTextEditor onchange={(data) => setData(data)} editorClass="card" />
       </div>
  )
}

API

Property	Type	Description
boldIcon	React.ReactNode	Icon for the bold formatting
italicIcon	React.ReactNode	Icon for italic formatting
strikethroughIcon	React.ReactNode	Icon for strikethrough formatting
codeIcon	React.ReactNode	Icon for code formatting
heading1Icon	React.ReactNode	Icon for heading level 1 formatting
heading2Icon	React.ReactNode	Icon for heading level 2 formatting
heading3Icon	React.ReactNode	Icon for heading level 3 formatting
bulletListIcon	React.ReactNode	Icon for bullet list formatting
orderedListIcon	React.ReactNode	Icon for ordered list formatting
codeBlockIcon	React.ReactNode	Icon for code block formatting
blockquoteIcon	React.ReactNode	Icon for blockquote formatting
undoIcon	React.ReactNode	Icon for undo action
redoIcon	React.ReactNode	Icon for redo action
showBold	boolean	Show/hide the bold formatting option
showItalic	boolean	Show/hide the italic formatting option
showStrikethrough	boolean	Show/hide the strikethrough formatting option
showCode	boolean	Show/hide the code formatting option
showHeading1	boolean	Show/hide the heading level 1 formatting option
showHeading2	boolean	Show/hide the heading level 2 formatting option
showHeading3	boolean	Show/hide the heading level 3 formatting option
showBulletList	boolean	Show/hide the bullet list formatting option
showOrderedList	boolean	Show/hide the ordered list formatting option
showCodeBlock	boolean	Show/hide the code block formatting option
showBlockquote	boolean	Show/hide the blockquote formatting option
showUndoIcon	boolean	Show/hide the undo action icon
showRedoIcon	boolean	Show/hide the redo action icon
onchange	(text: string) => void	Callback function triggered on text change
editorClass	string	Custom CSS style for the text input
buttonStyle	string	Custom CSS style for the editor buttons

Troubleshooting

If you're facing any issues while enabling setting showCodeBlock = true, showBlockquote = true you can customize its appearance by adding the following CSS styles to your main CSS file:

Example

.tiptap pre {
  background-color: #0d0d0d;
  color: #fff;
  font-family: "JetBrainsMono", monospace;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
}

.tiptap pre code {
  color: inherit;
  padding: 0;
  background: none;
  font-size: 0.8rem;
}

.tiptap blockquote {
  padding-left: 1rem;
  border-left: 2px solid rgba(13, 13, 13, 0.1);
}