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';