Modern WYSIWYG Rich Text Editor For React - rc-tiptap-editor

Description:

rc-tiptap-editor is a modern WYSIWYG rich text editor based on Tiptap and shadcn/ui.

It includes basic extensions such as text, heading, paragraph, bold, italic, underline, strikethrough, code, code block, bullet list, ordered list, blockquote, link, image, table, and more.

Basic usage:

1. Install and import the rc-tiptap-editor into your React project.

# Yarn
$ yarn add rc-tiptap-editor
# NPM
$ npm install rc-tiptap-editor
# PNPM
$ pnpm install rc-tiptap-editor

import BaseKit from 'rc-tiptap-editor';
import 'rc-tiptap-editor/style.css';

2. Create a basic editor in your app.

const extensions = [
  BaseKit.configure({
    // configs here
  }),
  ...
  // Import Extensions Here
];
const DEFAULT = '';
const App = () => {
  const [content, setContent] = useState(DEFAULT);
  const onChangeContent = (value: any) => {
    setContent(value);
  };
  return (
    <RcTiptapEditor
      output='html'
      content={content}
      onChangeContent={onChangeContent}
      extensions={extensions}
    />
  );
};

3. Available editor props.

interface IPropsRcTiptapEditor {
  content: string;
  extensions: AnyExtension[];
  output: 'html' | 'json' | 'text';
  modelValue?: string | object;
  dark?: boolean;
  dense?: boolean;
  disabled?: boolean;
  label?: string;
  hideToolbar?: boolean;
  disableBubble?: boolean;
  hideBubble?: boolean;
  removeDefaultWrapper?: boolean;
  maxWidth?: string | number;
  minHeight?: string | number;
  maxHeight?: string | number;
  editorClass?: string | string[] | Record<string, any>;
  contentClass?: string | string[] | Record<string, any>;
  onChangeContent?: (val: any) => void;
  useEditorOptions?: UseEditorOptions;
}