tiptap-parser

tiptap-parser

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

Table of Contents

• tiptap-parser
  • Table of Contents
  • Use case
  • Demo
  • Installation
  • Get started
    • Simple usage
    • Content with code
    • Customization
  • Props
    • classNames Props
  • Contributing

Use case

Tiptap editor is a text editor used mainly for blogging, and therefore in the back office.
The problem is that if it's just to display the content (for example in a Next.js website), it is overkill to install Tiptap or mui-tiptap editor (and the whole MUI library).
The purpose of this library is precisely to display the contents of mui-tiptap-editor which is an html saved as text. If you are using a dev oriented blog like Medium, this library is 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

classNames Props

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.