feat: update doc and example

tiavina-mika · May 31, 2024 · 634749b · 634749b
1 parent dd5a82a
commit 634749b
Show file tree

Hide file tree

Showing 8 changed files with 42 additions and 21 deletions.
diff --git a/README.md b/README.md
@@ -71,15 +71,11 @@ function App() {
 #### Content with code
 
 ```tsx
-const html = `<><h1>Hello there</h1><code>console.log("Log something here")</code></>`;
+const html = `<><h1>Hello there</h1><pre><code>console.log("Log something here")</code></pre></>`;
 
-function App() {
-  return (
-    <TiptapParser language="typescript">
-      {html}
-    </TiptapParser>
-  );
-}
+<TiptapParser language="typescript">
+  {html}
+</TiptapParser>
 ```
 
 #### Customization
@@ -88,6 +84,7 @@ function App() {
 const html = `<p><h1>Hello there</h1></p>`;
 
 <TiptapParser
+  containerClassName="bg-gray-100"
   classNames={{
     codeClassName: 'p-6',
     h1ClassName: 'text-xl',
@@ -124,6 +121,8 @@ const html = `<p><h1>Hello there</h1></p>`;
 |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
diff --git 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
@@ -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,17 +5356,17 @@ __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"
     lowlight: "npm:3.1.0"
   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
@@ -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 → src/TiptapParser.tsx b/src/Parse.tsx → 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
@@ -1,4 +1,4 @@
-import TiptapParser from "../Parse";
+import TiptapParser from "../TiptapParser";
 
 const html = `
 <h1>Here is an exemple of code</h1>

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