diff --git a/README.md b/README.md
index 5e165d6..23df1fe 100644
--- a/README.md
+++ b/README.md
@@ -71,15 +71,11 @@ function App() {
#### Content with code
```tsx
-const html = `<>
Hello there
console.log("Log something here")
>`;
+const html = `<>Hello there
console.log("Log something here")
>`;
-function App() {
- return (
-
- {html}
-
- );
-}
+
+ {html}
+
```
#### Customization
@@ -88,6 +84,7 @@ function App() {
const html = `Hello there
`;
Hello there
`;
|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](https://www.npmjs.com/package/html-react-parser)
+
## Contributing
diff --git a/example/.yarn/install-state.gz b/example/.yarn/install-state.gz
index 12d020e..9edb9d8 100644
Binary files a/example/.yarn/install-state.gz and b/example/.yarn/install-state.gz differ
diff --git a/example/package.json b/example/package.json
index 058f50d..9593c15 100644
--- a/example/package.json
+++ b/example/package.json
@@ -14,7 +14,7 @@
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
- "tiptap-parser": "^0.0.3"
+ "tiptap-parser": "^0.0.5"
},
"devDependencies": {
"@types/react": "^18.2.43",
diff --git a/example/yarn.lock b/example/yarn.lock
index cd2522b..bba2e50 100644
--- a/example/yarn.lock
+++ b/example/yarn.lock
@@ -1228,7 +1228,7 @@ __metadata:
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
tailwindcss: "npm:^3.4.3"
- tiptap-parser: "npm:^0.0.3"
+ tiptap-parser: "npm:^0.0.5"
typescript: "npm:^5.2.2"
vite: "npm:5.0.8"
vite-tsconfig-paths: "npm:^4.3.1"
@@ -5356,9 +5356,9 @@ __metadata:
languageName: node
linkType: hard
-"tiptap-parser@npm:^0.0.3":
- version: 0.0.3
- resolution: "tiptap-parser@npm:0.0.3"
+"tiptap-parser@npm:^0.0.5":
+ version: 0.0.5
+ resolution: "tiptap-parser@npm:0.0.5"
dependencies:
hast-util-to-html: "npm:^9.0.1"
html-react-parser: "npm:^5.1.10"
@@ -5366,7 +5366,7 @@ __metadata:
peerDependencies:
react: ^16.8.0 || ^17.0.2 || ^18.2.0
react-dom: ^16.8.0 || ^17.0.2 || ^18.2.0
- checksum: 10c0/87eea6f0b898c735826d7f887aff6927b60fd234ce4cca6b06681aa69815790839a9c52bebe4e60ed2bc736c85a506e410584755606889f653424c0250bff42b
+ checksum: 10c0/ae7b771061b5929fc7f9cb3fb62e4f836ae83fcaf1e4a4868e1b9f2d3df1627adb71e5b115c4037abd8d35e8d8eb4183b2104ab57798fbe32dd4c1512087f065
languageName: node
linkType: hard
diff --git a/package.json b/package.json
index 28603be..27da73f 100644
--- a/package.json
+++ b/package.json
@@ -1,18 +1,19 @@
{
"name": "tiptap-parser",
- "version": "0.0.4",
+ "version": "0.0.5",
"description": "HTML parser to React component built on the top of html-react-parser with code syntax highlighting",
"keywords": [
"tiptap",
"prosemirror",
"rich text editor",
- "react text editor",
+ "react",
"wysiwyg",
"quill",
"draftjs",
"slate",
+ "lowlight",
+ "highlight",
"html string to react",
- "html-react-parser",
"code editor"
],
"homepage": "https://github.com/tiavina-mika/tiptap-parser",
diff --git a/src/Parse.tsx b/src/TiptapParser.tsx
similarity index 86%
rename from src/Parse.tsx
rename to src/TiptapParser.tsx
index 2befee2..415f36b 100644
--- a/src/Parse.tsx
+++ b/src/TiptapParser.tsx
@@ -110,13 +110,30 @@ const parseHtml = (
}
// ------------------------------ //
-// ----- use it as component ---- //
+// ---------- main props -------- //
// ------------------------------ //
export type TiptapProps = {
+ /**
+ * the stringified html content to be parsed
+ */
children: string;
+ /**
+ * object that contains the class names for the html tags
+ */
classNames?: ClassNamesProps;
+ /**
+ * the programming language of the code snippets to be highlighted
+ * default: `javascript`
+ * see all available languages here: https://highlightjs.org/examples
+ */
language?: string;
+ /**
+ * the class name of the container div
+ */
containerClassName?: string;
+ /**
+ * HTMLReactParserOptions: the options of the `html-react-parser` library
+ */
} & HTMLReactParserOptions;
const TiptapParser = ({ classNames, containerClassName, language, children, ...rest }: TiptapProps) => {
return (
diff --git a/src/dev/App.tsx b/src/dev/App.tsx
index 59886e8..cd3b886 100644
--- a/src/dev/App.tsx
+++ b/src/dev/App.tsx
@@ -1,4 +1,4 @@
-import TiptapParser from "../Parse";
+import TiptapParser from "../TiptapParser";
const html = `
Here is an exemple of code
diff --git a/src/index.ts b/src/index.ts
index 25e17a2..8a246ec 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,5 +1,9 @@
export {
default as TiptapParser,
type TiptapProps,
- type ClassNamesProps,
-} from './Parse';
+ type ClassNamesProps
+} from './TiptapParser';
+
+export {
+ type HTMLReactParserOptions
+} from 'html-react-parser';