You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP →
tiptap-parser
Advanced tools
tiptap-parser - npm Package Compare versions
Comparing version 0.0.5 to 0.0.6
@@ -0,1 +1,8 @@ | ||
| # [1.1.0](https://github.com/tiavina-mika/tiptap-parser/compare/v1.0.0...v1.1.0) (2024-05-31) | ||
| ### Features | ||
| * update doc and example ([634749b](https://github.com/tiavina-mika/tiptap-parser/commit/634749b7d2fd8e8c3c5d8cb7f17acaea7b174964)) | ||
| # 1.0.0 (2024-05-30) | ||
@@ -2,0 +9,0 @@ |
@@ -1,13 +0,3 @@ | ||
| /** | ||
| * | ||
| * documentations: | ||
| * https://www.npmjs.com/package/html-react-parser | ||
| * https://github.com/wooorm/lowlight?tab=readme-ov-file | ||
| * https://github.com/GeoffSelby/tailwind-highlightjs | ||
| * https://highlightjs.org/examples (list of all available themes) | ||
| * https://medium.com/@hizacharylee/simplify-syntax-highlighting-with-highlight-js-b65af3bdc509 (custom css theme, not used here) | ||
| * | ||
| */ | ||
| import { HTMLReactParserOptions } from 'html-react-parser'; | ||
| import './index.css'; | ||
| import { HTMLReactParserOptions } from 'html-react-parser'; | ||
| export type ClassNamesProps = { | ||
@@ -34,3 +24,3 @@ codeClassName?: string; | ||
| */ | ||
| children: string; | ||
| content: string; | ||
| /** | ||
@@ -51,3 +41,3 @@ * object that contains the class names for the html tags | ||
| } & HTMLReactParserOptions; | ||
| declare const TiptapParser: ({ classNames, containerClassName, language, children, ...rest }: TiptapProps) => import("react/jsx-runtime").JSX.Element; | ||
| declare const TiptapParser: ({ classNames, containerClassName, language, content, ...rest }: TiptapProps) => import("react/jsx-runtime").JSX.Element; | ||
| export default TiptapParser; |
| import { jsx as _jsx } from "react/jsx-runtime"; | ||
| /** | ||
| * | ||
| * documentations: | ||
| * https://www.npmjs.com/package/html-react-parser | ||
| * https://github.com/wooorm/lowlight?tab=readme-ov-file | ||
| * https://github.com/GeoffSelby/tailwind-highlightjs | ||
| * https://highlightjs.org/examples (list of all available themes) | ||
| * https://medium.com/@hizacharylee/simplify-syntax-highlighting-with-highlight-js-b65af3bdc509 (custom css theme, not used here) | ||
| * | ||
| */ | ||
| import './index.css'; | ||
| import parse, { attributesToProps, domToReact } from 'html-react-parser'; | ||
| import { common, createLowlight } from 'lowlight'; | ||
| import { toHtml } from 'hast-util-to-html'; | ||
| import './index.css'; | ||
| const lowlight = createLowlight(common); | ||
@@ -71,5 +61,5 @@ const parseHtml = ( | ||
| }; | ||
| const TiptapParser = ({ classNames, containerClassName, language, children, ...rest }) => { | ||
| return (_jsx("div", { className: containerClassName, children: parseHtml(children, classNames, language, rest) })); | ||
| const TiptapParser = ({ classNames, containerClassName, language, content, ...rest }) => { | ||
| return (_jsx("div", { className: containerClassName, children: parseHtml(content, classNames, language, rest) })); | ||
| }; | ||
| export default TiptapParser; |
@@ -1,13 +0,3 @@ | ||
| /** | ||
| * | ||
| * documentations: | ||
| * https://www.npmjs.com/package/html-react-parser | ||
| * https://github.com/wooorm/lowlight?tab=readme-ov-file | ||
| * https://github.com/GeoffSelby/tailwind-highlightjs | ||
| * https://highlightjs.org/examples (list of all available themes) | ||
| * https://medium.com/@hizacharylee/simplify-syntax-highlighting-with-highlight-js-b65af3bdc509 (custom css theme, not used here) | ||
| * | ||
| */ | ||
| import { HTMLReactParserOptions } from 'html-react-parser'; | ||
| import './index.css'; | ||
| import { HTMLReactParserOptions } from 'html-react-parser'; | ||
| export type ClassNamesProps = { | ||
@@ -34,3 +24,3 @@ codeClassName?: string; | ||
| */ | ||
| children: string; | ||
| content: string; | ||
| /** | ||
@@ -51,3 +41,3 @@ * object that contains the class names for the html tags | ||
| } & HTMLReactParserOptions; | ||
| declare const TiptapParser: ({ classNames, containerClassName, language, children, ...rest }: TiptapProps) => import("react/jsx-runtime").JSX.Element; | ||
| declare const TiptapParser: ({ classNames, containerClassName, language, content, ...rest }: TiptapProps) => import("react/jsx-runtime").JSX.Element; | ||
| export default TiptapParser; |
@@ -38,16 +38,6 @@ "use strict"; | ||
| const jsx_runtime_1 = require("react/jsx-runtime"); | ||
| /** | ||
| * | ||
| * documentations: | ||
| * https://www.npmjs.com/package/html-react-parser | ||
| * https://github.com/wooorm/lowlight?tab=readme-ov-file | ||
| * https://github.com/GeoffSelby/tailwind-highlightjs | ||
| * https://highlightjs.org/examples (list of all available themes) | ||
| * https://medium.com/@hizacharylee/simplify-syntax-highlighting-with-highlight-js-b65af3bdc509 (custom css theme, not used here) | ||
| * | ||
| */ | ||
| require("./index.css"); | ||
| const html_react_parser_1 = __importStar(require("html-react-parser")); | ||
| const lowlight_1 = require("lowlight"); | ||
| const hast_util_to_html_1 = require("hast-util-to-html"); | ||
| require("./index.css"); | ||
| const lowlight = (0, lowlight_1.createLowlight)(lowlight_1.common); | ||
@@ -109,5 +99,5 @@ const parseHtml = ( | ||
| const TiptapParser = (_a) => { | ||
| var { classNames, containerClassName, language, children } = _a, rest = __rest(_a, ["classNames", "containerClassName", "language", "children"]); | ||
| return ((0, jsx_runtime_1.jsx)("div", { className: containerClassName, children: parseHtml(children, classNames, language, rest) })); | ||
| var { classNames, containerClassName, language, content } = _a, rest = __rest(_a, ["classNames", "containerClassName", "language", "content"]); | ||
| return ((0, jsx_runtime_1.jsx)("div", { className: containerClassName, children: parseHtml(content, classNames, language, rest) })); | ||
| }; | ||
| exports.default = TiptapParser; |
| { | ||
| "name": "tiptap-parser", | ||
| "version": "0.0.5", | ||
| "version": "0.0.6", | ||
| "description": "HTML parser to React component built on the top of html-react-parser with code syntax highlighting", | ||
@@ -5,0 +5,0 @@ "keywords": [ |
@@ -14,17 +14,18 @@ # tiptap-parser | ||
| - [Motivation](#motivation) | ||
| - [Installation](#installation) | ||
| - [Demo](#demo) | ||
| - [tiptap-parser](#tiptap-parser) | ||
| - [Table of Contents](#table-of-contents) | ||
| - [Use case](#use-case) | ||
| - [Demo](#demo) | ||
| - [Installation](#installation) | ||
| - [Get started](#get-started) | ||
| - [Simple usage](#simple-usage) | ||
| - [Content with code](#content-with-code) | ||
| - [Customization](#customization) | ||
| - [Props](#props) | ||
| - [classNames Props](#classnames-props) | ||
| - [Contributing](#contributing) | ||
| - [Get started](#get-started) | ||
| - [Customization](#customization) | ||
| - [Props](#props) | ||
| - [Contributing](#contributing) | ||
| </details> | ||
| ## Motivation | ||
| ## Use case | ||
| Tiptap editor is a text editor used mainly for blogging, and therefore in the back office. | ||
@@ -65,5 +66,3 @@ <br />The problem is that if it's just to display the content (for example in a Next.js website), it is overkill to install <a href="https://tiptap.dev/">Tiptap</a> or <a href="https://www.npmjs.com/package/mui-tiptap-editor">mui-tiptap editor</a> (and the whole MUI library). | ||
| return ( | ||
| <TiptapParser> | ||
| {html} | ||
| </TiptapParser> | ||
| <TiptapParser content={html} /> | ||
| ); | ||
@@ -78,5 +77,3 @@ } | ||
| <TiptapParser language="typescript"> | ||
| {html} | ||
| </TiptapParser> | ||
| <TiptapParser content={html} language="typescript" /> | ||
| ``` | ||
@@ -97,5 +94,4 @@ | ||
| }} | ||
| content={html} | ||
| /> | ||
| {html} | ||
| </TiptapParser> | ||
| ``` | ||
@@ -107,5 +103,6 @@ | ||
| |----------------|-------------------------------|-----------------------------|-----------------------------| | ||
| |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`|empty| language of the code. [see the list](https://github.com/wooorm/lowlight?tab=readme-ov-file#data) | ||
| |language|`string`|javascript| language of the code. [see the list](https://github.com/wooorm/lowlight?tab=readme-ov-file#data) | ||
@@ -112,0 +109,0 @@ ### classNames Props |
Fixed alerts
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Number of medium supply chain risk alerts
0
-100%Worsened metrics
- Total package byte prevSize
20990
-4.95%- Lines of code
282
-12.42%- Number of lines in readme file
127
-2.31%No dependency changes