Skip to content

Latest commit

 

History

History
110 lines (80 loc) · 3.92 KB

README.md

File metadata and controls

110 lines (80 loc) · 3.92 KB
Raw

tiptap-parser

HTML parser for Tiptap editor build on the of html-react-parser with code syntax highlighting.

NPM Version Language

Use case

The Tiptap editor is primarily used as a text editor for blogging, particularly in back-office applications. However, if the goal is simply to display content (for example, on a Next.js website), it may be excessive to install either the Tiptap or the mui-tiptap-editor along with the entire MUI library.

This library is specifically designed to display the contents of the mui-tiptap-editor, which saves HTML as text. If you're using a developer-oriented blogging platform like Medium, this library is ideal for you.

Demo

Try it yourself in this CodeSandbox live demo

Screenshot

Installation

npm install tiptap-parser

or

yarn add tiptap-parser

Get started

Simple usage

import TiptapParser from "tiptap-parser";

const html = `<h1>Hello world</h1>`;

function App() {
  return (
    <TiptapParser content={html} />
  );
}

Content with code

const html = `<><h1>Hello there</h1><pre><code>console.log("Log something here")</code></pre></>`;

<TiptapParser content={html} language="typescript" />

Customization

const html = `<p><h1>Hello there</h1></p>`;

<TiptapParser
  containerClassName="bg-gray-100"
  classNames={{
    codeClassName: 'p-6',
    h1ClassName: 'text-xl',
    aClassName: 'underline',
    pClassName: 'text-gray-400'
  }}
  content={html}
/>

Props

props type Default value Description
content string empty html string to be displayed
containerClassName string empty styles of the container
classNames ClassNameProps empty class names of each element withing the container
language string javascript language of the code. see the list

Types

props type Default value Description
codeClassName string empty class name of code element
h1ClassName string empty class name of h1 element
h2ClassName string empty class name of h2 element
h3ClassName string empty class name of h3 element
h4ClassName string empty class name of h4 element
h5ClassName string empty class name of h5 element
h6ClassName string empty class name of h6 element
pClassName string empty class name of p element
ulClassName string empty class name of ul element
spanClassName string empty class name of span element
divClassName string empty class name of div element
aClassName string empty class name of a element
tableClassName string empty class name of table element
imageClassName string empty class name of image element
other props HTMLReactParserOptions empty all html-react-parser props

Contributing

Get started here.