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