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
• <hr/>
• Toggles (details, summary)
• Images
• File downloads
• Links
• Checkboxes
• Mathematical equations

Features

1. XSS Prevention: Uses the DOMPurify package to sanitize input HTML, ensuring safety from XSS (Cross-Site Scripting) attacks.

2. Style Isolation: Employs Shadow DOM and all: initial styling to completely isolate from external styles, ensuring consistent styling.

3. 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>
  );
}

License

MIT

Contributing

Bug reports, feature requests, and pull requests are always welcome. Please check the project's contribution guidelines before contributing.

Support

If you encounter any issues or have questions, please open an issue.