@teamsparta/html-styler NPM

sparta-html-styler

sparta-html-styler is a React package that provides a component for rendering HTML strings into a Notion-like UI, following the Sparta design system.

Installation

You can install the package using npm:

# Using npm
npm install sparta-html-styler

# Using pnpm
pnpm add sparta-html-styler

# Using yarn
yarn add sparta-html-styler

Usage

import { HtmlStyler } from 'sparta-html-styler';

function MyComponent() {
  const htmlContent = `
    <h1>Title</h1>
    <p>Content</p>
    <code>Code example</code>
  `;

  return <HtmlStyler html={htmlContent} />;
}

Supported HTML Elements

sparta-html-styler supports the following HTML elements:

Code blocks
Callouts
Array-type elements (ul, ol)
h1, h2, h3
\
Toggles (details, summary)
Images
File downloads
Links
Checkboxes
Mathematical equations

Features

XSS Prevention: Uses the DOMPurify package to sanitize input HTML, ensuring safety from XSS (Cross-Site Scripting) attacks.
Style Isolation: Employs Shadow DOM and all: initial styling to completely isolate from external styles, ensuring consistent styling.
Notion-style UI: Provides a Notion-like UI based on the Sparta design system.

Dependencies

The package uses the following key dependencies:

React (^18.0.0) and React DOM (^18.0.0) as peer dependencies
@emotion/cache (^11.13.1), @emotion/react (^11.13.3), @emotion/styled (^11.13.0): For efficient styling solutions
@teamsparta/design-system (^2.7.2): Sparta's design system components
better-react-mathjax (^2.0.3): For rendering mathematical equations
dompurify (^3.1.6): For sanitizing HTML to prevent XSS attacks
html-react-parser (^5.1.16): For parsing HTML strings into React components
react-shadow (^20.5.0): For creating shadow DOM roots
react-syntax-highlighter (^15.5.0): For syntax highlighting in code blocks

Example

import { HtmlStyler } from 'sparta-html-styler';

const htmlContent = `
  <h1>sparta-html-styler Usage Example</h1>
  <h2>Code Block</h2>
  <pre><code>console.log('Hello, Sparta!');</code></pre>
  <h2>Callout</h2>
  <div class="callout">
    Use this to emphasize important information.
  </div>
  <h2>Checklist</h2>
  <ul>
    <li><input type="checkbox" checked> Task 1</li>
    <li><input type="checkbox"> Task 2</li>
  </ul>
`;

function App() {
  return (
    <div>
      <HtmlStyler html={htmlContent} />
    </div>
  );
}