BREAKING: update doc

tiavina-mika · May 30, 2024 · 5c94f18 · 5c94f18
1 parent af587b3
commit 5c94f18
Show file tree

Hide file tree

Showing 6 changed files with 5,979 additions and 52 deletions.
diff --git a/README.md b/README.md
@@ -33,80 +33,98 @@ Try it yourself in this **[CodeSandbox live demo](https://codesandbox.io/p/githu
 
 ```shell
 
-npm  install  html-code-editor
+npm  install  tiptap-parser
 
 ```
 or
 ```shell
 
-yarn  add  html-code-editor
+yarn  add  tiptap-parser
+```
 
 
 ## Get started
 
 #### Simple usage
 
 ```tsx
-import parseHtml from 'html-code-editor';
+import TiptapParser from "tiptap-parser";
 
-const html = `<p><h1>Hello there</h1><code>console.log("Using it as a component")</code></p>`;
+const html = `<h1>Hello world</h1>`;
 
 function App() {
   return (
-    <div>
-      {parseHtml(html)}
-    </div>
+    <TiptapParser>
+      {html}
+    </TiptapParser>
   );
 }
 ```
 
-#### Using as a component
+#### Content with code
+
 ```tsx
-import { HtmlCodeParser } from '../Parse'
+import TiptapParser from "tiptap-parser";
 
-const html = `<p><h1>Hello there</h1><code>console.log("Using it as a component")</code></p>`;
+const html = `<><h1>Hello there</h1><code>console.log("Log something here")</code></>`;
 
-const App = () => {
+function App() {
   return (
-    <HtmlCodeParser language="typescript" codeContainerClassName="custom-class">
+    <TiptapParser language="typescript">
       {html}
-    </HtmlCodeParser>
-  )
+    </TiptapParser>
+  );
 }
 ```
 
-
-## Language
-
-<p>By default it's use <code>Javascript</code></p>
+#### Customization
 
 ```tsx
-  parseHtml(html, { language: 'php' })
-```
-```tsx
-  <HtmlCodeParser language="php">
-    {html}
-  </HtmlCodeParser>
-```
+import { HtmlCodeParser } from '../Parse'
 
-## Customization
-```tsx
-  parseHtml(html, { codeContainerClassName: 'bg-gray-300' })
-```
-```tsx
-  <HtmlCodeParser codeContainerClassName="bg-gray-300">
-    {html}
-  </HtmlCodeParser>
-```
+const html = `<p><h1>Hello there</h1></p>`;
 
+const App = () => {
+  return (
+    <TiptapParser
+      classNames={{
+        codeClassName: 'p-6',
+        h1ClassName: 'text-xl',
+        aClassName: 'underline',
+        pClassName: 'text-gray-400'
+      }}
+    />
+      {html}
+    </TiptapParser>
+  )
+}
+```
 
 ## Props
 
 |props |type                          | Default value                         | Description |
 |----------------|-------------------------------|-----------------------------|-----------------------------|
-|children|`string[]`| empty | html string
-|codeContainerClassName|`string`|empty| styles of the code container
-|language|`string`|empty| language of the code ((see the list)[https://github.com/wooorm/lowlight?tab=readme-ov-file#data])
+|containerClassName|`string`|empty| styles of the container
+|classNames|`ClassNameProps`|empty| class names of each element withing the container
+|language|`string`|empty| language of the code. [see the list](https://github.com/wooorm/lowlight?tab=readme-ov-file#data)
+
+### 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
 
 ## 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
@@ -12,9 +12,9 @@
     "upgrade": "yarn add tiptap-parser@latest"
   },
   "dependencies": {
-    "tiptap-parser": "^0.0.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tiptap-parser": "^0.0.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,25 +1,48 @@
-import { parseHtml, HtmlCodeParser } from "tiptap-parser";
+import { TiptapParser } from "tiptap-parser";
 
-// const html = `<p><h1>Hello there</h1><code>console.log("Using it as a component")</code></p>`;
 const html = `
 <h1>Here is an exemple of code</h1>
 <p>This is a stringified html with code</p>
 <br/>
-<pre><code>import Link from 'next/link';import { primaryFont } from '@/components/fonts';import Title from '@/components/typography/Title';// exemple de commentaireconst NotFound = () =&gt; (  &lt;html lang="en"&gt;    &lt;body className="antialiased dark:bg-neutral-900"&gt;      &lt;div className="flex min-h-screen flex-col items-center justify-center space-y-8"&gt;        &lt;Title className="text-4xl font-semibold"&gt;404 - Page Not Found&lt;/Title&gt;        &lt;div className="space-x-4"&gt;          &lt;Link            className="text-blue-600 underline duration-300 hover:text-red-500"            href="/"          &gt;            Homepage          &lt;/Link&gt;          &lt;Link            className="text-blue-600 underline duration-300 hover:text-red-500"            href="/contact"          &gt;            Contact Us          &lt;/Link&gt;        &lt;/div&gt;      &lt;/div&gt;    &lt;/body&gt;  &lt;/html&gt;);export default NotFound;</code></pre><p></p>
+<pre><code>import Link from 'next/link';
 
+import Title from '@/components/typography/Title';
+
+// some comment here
+
+const NotFound = () =&gt; (
+  &lt;html lang="en"&gt;
+    &lt;body className=""&gt;
+      &lt;div className="flex min-h-screen flex-col items-center justify-center space-y-8"&gt;
+        &lt;Title className="text-4xl font-semibold"&gt;404 - Page Not Found&lt;/Title&gt;
+
+        &lt;div className="space-x-4"&gt;
+          &lt;Link
+            className="text-blue-600 underline duration-300 hover:text-red-500"
+            href="/"
+          &gt;
+            Homepage
+          &lt;/Link&gt;
+          &lt;Link
+            className="text-blue-600 underline duration-300 hover:text-red-500"
+            href="/contact"
+          &gt;
+            Contact Us
+          &lt;/Link&gt;
+        &lt;/div&gt;
+      &lt;/div&gt;
+    &lt;/body&gt;
+  &lt;/html&gt;
+);
+export default NotFound;
+</code></pre><p></p>
 `;
 
 const App = () => {
   return (
-    <div>
-      {parseHtml(html)}
-      <HtmlCodeParser
-        language="typescript"
-        codeContainerClassName="custom-class"
-      >
-        {html}
-      </HtmlCodeParser>
-    </div>
+    <TiptapParser language="tsx" classNames={{ h1ClassName: 'h1'}}>
+      {html}
+    </TiptapParser>
   );
 };