Typography and Markdown Balancer Components

This repository contains two main React components designed to handle typography and Markdown-based text rendering with flexibility and responsiveness.

[Demo]

Components

1. DifferentCaseTypographySample.jsx

This component showcases styled text with different case usages and typographical emphasis. It includes:

• Markdown Rendering: Supports rendering of Markdown text using react-markdown.
• User Interaction: Dropdown for selecting text styles or formats.
• Integration with TextWidget: Demonstrates encapsulation of Markdown logic within reusable widgets.

Dependencies:

• antd: For UI components like Flex and Select.
• Custom component TextWidget.

Usage Example:

import DifferentCaseTypographySample from "./DifferentCaseTypographySample";

function App() {
  return <DifferentCaseTypographySample />;
}

export default App;

2. TextWidget.jsx

A utility component designed to process and render Markdown content with added responsiveness.

Features:

• Markdown Parsing: Leverages react-markdown for Markdown-to-HTML conversion.
• Text Wrapping: Utilizes react-wrap-balancer for better text alignment and wrapping.
• Custom Styling: Includes Emotion.js for styled components.
• Markdown Detection: A helper function isMarkdown identifies valid Markdown content.

Key Function:

function isMarkdown(text) {
  const markdownPatterns = {
    header: /^#+\s/,
    emphasis: /[*_]/,
    list: /^(\\s*[-+*]|\\d+\\.)\\s/,
    link: /\\[.*\\]\\(.*\\)/,
    image: /!\\[.*\\]\\(.*\\)/,
  };

  for (let pattern in markdownPatterns) {
    if (
      Object.hasOwnProperty.call(markdownPatterns, pattern) &&
      markdownPatterns[pattern].test(text)
    ) {
      return true;
    }
  }
  return false;
}

Usage Example:

import TextWidget from "./TextWidget";

function App() {
  const sampleText = "## Hello World\nThis is a sample Markdown content.";

  return <TextWidget text={sampleText} />;
}

export default App;