tiptap-parser

tiptap-parser

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

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

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.