simple-rich-text-editor v1.2.1

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

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