tessl/npm-mantine--code-highlight

React component library for syntax highlighting code blocks and inline code with Mantine theme integration

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Custom Controls

Name: tessl/npm-mantine--code-highlight
Author: tessl

The CodeHighlightControl component allows adding custom interactive elements to code highlight components, providing a consistent styling and behavior pattern.

Capabilities

CodeHighlightControl Component

Custom control component for adding interactive elements to code blocks.

/**
 * Custom control component for code highlight controls
 * Can be used as CodeHighlight.Control or imported directly
 * @param props - Control configuration
 * @returns Rendered control button with optional tooltip
 */
function CodeHighlightControl(props: CodeHighlightControlProps): JSX.Element;

interface CodeHighlightControlProps extends 
  BoxProps, 
  StylesApiProps<CodeHighlightControlFactory> {
  /** Control icon or content */
  children?: React.ReactNode;
  /** Label displayed in the tooltip when the control is hovered */
  tooltipLabel?: string;
}

type CodeHighlightControlFactory = PolymorphicFactory<{
  props: CodeHighlightControlProps;
  defaultRef: HTMLButtonElement;
  defaultComponent: 'button';
}>;

Usage Examples:

import { CodeHighlight, CodeHighlightControl } from "@mantine/code-highlight";
import { ActionIcon } from "@mantine/core";
import { 
  IconDownload, 
  IconShare, 
  IconExternalLink,
  IconBookmark 
} from "@tabler/icons-react";

// Using as CodeHighlight.Control (recommended)
function WithBuiltInControl() {
  const handleDownload = () => {
    // Download logic
    console.log('Downloading code...');
  };

  return (
    <CodeHighlight
      code={`function example() {
  return "Hello World";
}`}
      language="javascript"
      controls={[
        <CodeHighlight.Control 
          key="download" 
          tooltipLabel="Download code"
          onClick={handleDownload}
        >
          <IconDownload size={14} />
        </CodeHighlight.Control>
      ]}
    />
  );
}

// Multiple custom controls
function MultipleControls() {
  const handleShare = () => console.log('Sharing...');
  const handleBookmark = () => console.log('Bookmarking...');
  const handleOpenExternal = () => console.log('Opening externally...');

  return (
    <CodeHighlight
      code="npm install @mantine/code-highlight"
      language="bash"
      withCopyButton={false} // Disable default copy button
      controls={[
        <CodeHighlight.Control key="share" tooltipLabel="Share code">
          <IconShare size={14} onClick={handleShare} />
        </CodeHighlight.Control>,
        
        <CodeHighlight.Control key="bookmark" tooltipLabel="Bookmark">
          <IconBookmark size={14} onClick={handleBookmark} />
        </CodeHighlight.Control>,
        
        <CodeHighlight.Control key="external" tooltipLabel="Open in editor">
          <IconExternalLink size={14} onClick={handleOpenExternal} />
        </CodeHighlight.Control>
      ]}
    />
  );
}

// Using imported CodeHighlightControl directly
function DirectControlUsage() {
  return (
    <CodeHighlight
      code="console.log('Custom control');"
      language="javascript"
      controls={[
        <CodeHighlightControl key="custom" tooltipLabel="Custom action">
          <IconDownload size={14} />
        </CodeHighlightControl>
      ]}
    />
  );
}

// Control without tooltip
function SimpleControl() {
  return (
    <CodeHighlight
      code="SELECT * FROM users;"
      language="sql"
      controls={[
        <CodeHighlight.Control key="run">
          ▶️ Run Query
        </CodeHighlight.Control>
      ]}
    />
  );
}

// Interactive controls with state
function InteractiveControls() {
  const [isBookmarked, setIsBookmarked] = useState(false);
  const [likes, setLikes] = useState(0);

  return (
    <CodeHighlight
      code={`// Useful utility function
function debounce(func, wait) {
  let timeout;
  return function executedFunction(...args) {
    const later = () => {
      clearTimeout(timeout);
      func(...args);
    };
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
  };
}`}
      language="javascript"
      withCopyButton
      controls={[
        <CodeHighlight.Control 
          key="bookmark"
          tooltipLabel={isBookmarked ? "Remove bookmark" : "Bookmark code"}
          onClick={() => setIsBookmarked(!isBookmarked)}
        >
          {isBookmarked ? "⭐" : "☆"}
        </CodeHighlight.Control>,
        
        <CodeHighlight.Control 
          key="like"
          tooltipLabel={`${likes} likes`}
          onClick={() => setLikes(likes + 1)}
        >
          👍 {likes}
        </CodeHighlight.Control>
      ]}
    />
  );
}

// Control with custom styling
function StyledControl() {
  return (
    <CodeHighlight
      code="git commit -m 'feat: add new feature'"
      language="bash"
      controls={[
        <CodeHighlight.Control 
          key="styled"
          tooltipLabel="Run command"
          style={{ color: 'green' }}
          className="custom-control"
        >
          <IconExternalLink size={14} />
        </CodeHighlight.Control>
      ]}
    />
  );
}

Control Integration

With CodeHighlightTabs

Custom controls work seamlessly with tabbed interfaces:

function TabsWithControls() {
  const code = [
    {
      fileName: 'App.tsx',
      code: 'function App() { return <div>Hello</div>; }',
      language: 'tsx'
    },
    {
      fileName: 'utils.js', 
      code: 'export const helper = () => {};',
      language: 'javascript'
    }
  ];

  return (
    <CodeHighlightTabs
      code={code}
      controls={[
        <CodeHighlight.Control key="download" tooltipLabel="Download project">
          <IconDownload size={14} />
        </CodeHighlight.Control>
      ]}
    />
  );
}

Built-in Control Combination

Custom controls can be combined with built-in copy and expand controls:

function CombinedControls() {
  return (
    <CodeHighlight
      code={longCodeExample}
      language="typescript"
      withCopyButton // Built-in copy button
      withExpandButton // Built-in expand button
      controls={[
        // Custom controls are added alongside built-in ones
        <CodeHighlight.Control key="share" tooltipLabel="Share">
          <IconShare size={14} />
        </CodeHighlight.Control>
      ]}
    />
  );
}