0
# Custom Controls
1

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

4
## Capabilities
5

6
### CodeHighlightControl Component
7

8
Custom control component for adding interactive elements to code blocks.
9

10
```typescript { .api }
11
/**
12
 * Custom control component for code highlight controls
13
 * Can be used as CodeHighlight.Control or imported directly
14
 * @param props - Control configuration
15
 * @returns Rendered control button with optional tooltip
16
 */
17
function CodeHighlightControl(props: CodeHighlightControlProps): JSX.Element;
18

19
interface CodeHighlightControlProps extends 
20
  BoxProps, 
21
  StylesApiProps<CodeHighlightControlFactory> {
22
  /** Control icon or content */
23
  children?: React.ReactNode;
24
  /** Label displayed in the tooltip when the control is hovered */
25
  tooltipLabel?: string;
26
}
27

28
type CodeHighlightControlFactory = PolymorphicFactory<{
29
  props: CodeHighlightControlProps;
30
  defaultRef: HTMLButtonElement;
31
  defaultComponent: 'button';
32
}>;
33
```
34

35
**Usage Examples:**
36

37
```typescript
38
import { CodeHighlight, CodeHighlightControl } from "@mantine/code-highlight";
39
import { ActionIcon } from "@mantine/core";
40
import { 
41
  IconDownload, 
42
  IconShare, 
43
  IconExternalLink,
44
  IconBookmark 
45
} from "@tabler/icons-react";
46

47
// Using as CodeHighlight.Control (recommended)
48
function WithBuiltInControl() {
49
  const handleDownload = () => {
50
    // Download logic
51
    console.log('Downloading code...');
52
  };
53

54
  return (
55
    <CodeHighlight
56
      code={`function example() {
57
  return "Hello World";
58
}`}
59
      language="javascript"
60
      controls={[
61
        <CodeHighlight.Control 
62
          key="download" 
63
          tooltipLabel="Download code"
64
          onClick={handleDownload}
65
        >
66
          <IconDownload size={14} />
67
        </CodeHighlight.Control>
68
      ]}
69
    />
70
  );
71
}
72

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

79
  return (
80
    <CodeHighlight
81
      code="npm install @mantine/code-highlight"
82
      language="bash"
83
      withCopyButton={false} // Disable default copy button
84
      controls={[
85
        <CodeHighlight.Control key="share" tooltipLabel="Share code">
86
          <IconShare size={14} onClick={handleShare} />
87
        </CodeHighlight.Control>,
88
        
89
        <CodeHighlight.Control key="bookmark" tooltipLabel="Bookmark">
90
          <IconBookmark size={14} onClick={handleBookmark} />
91
        </CodeHighlight.Control>,
92
        
93
        <CodeHighlight.Control key="external" tooltipLabel="Open in editor">
94
          <IconExternalLink size={14} onClick={handleOpenExternal} />
95
        </CodeHighlight.Control>
96
      ]}
97
    />
98
  );
99
}
100

101
// Using imported CodeHighlightControl directly
102
function DirectControlUsage() {
103
  return (
104
    <CodeHighlight
105
      code="console.log('Custom control');"
106
      language="javascript"
107
      controls={[
108
        <CodeHighlightControl key="custom" tooltipLabel="Custom action">
109
          <IconDownload size={14} />
110
        </CodeHighlightControl>
111
      ]}
112
    />
113
  );
114
}
115

116
// Control without tooltip
117
function SimpleControl() {
118
  return (
119
    <CodeHighlight
120
      code="SELECT * FROM users;"
121
      language="sql"
122
      controls={[
123
        <CodeHighlight.Control key="run">
124
          ▶️ Run Query
125
        </CodeHighlight.Control>
126
      ]}
127
    />
128
  );
129
}
130

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

136
  return (
137
    <CodeHighlight
138
      code={`// Useful utility function
139
function debounce(func, wait) {
140
  let timeout;
141
  return function executedFunction(...args) {
142
    const later = () => {
143
      clearTimeout(timeout);
144
      func(...args);
145
    };
146
    clearTimeout(timeout);
147
    timeout = setTimeout(later, wait);
148
  };
149
}`}
150
      language="javascript"
151
      withCopyButton
152
      controls={[
153
        <CodeHighlight.Control 
154
          key="bookmark"
155
          tooltipLabel={isBookmarked ? "Remove bookmark" : "Bookmark code"}
156
          onClick={() => setIsBookmarked(!isBookmarked)}
157
        >
158
          {isBookmarked ? "⭐" : "☆"}
159
        </CodeHighlight.Control>,
160
        
161
        <CodeHighlight.Control 
162
          key="like"
163
          tooltipLabel={`${likes} likes`}
164
          onClick={() => setLikes(likes + 1)}
165
        >
166
          👍 {likes}
167
        </CodeHighlight.Control>
168
      ]}
169
    />
170
  );
171
}
172

173
// Control with custom styling
174
function StyledControl() {
175
  return (
176
    <CodeHighlight
177
      code="git commit -m 'feat: add new feature'"
178
      language="bash"
179
      controls={[
180
        <CodeHighlight.Control 
181
          key="styled"
182
          tooltipLabel="Run command"
183
          style={{ color: 'green' }}
184
          className="custom-control"
185
        >
186
          <IconExternalLink size={14} />
187
        </CodeHighlight.Control>
188
      ]}
189
    />
190
  );
191
}
192
```
193

194
## Control Integration
195

196
### With CodeHighlightTabs
197

198
Custom controls work seamlessly with tabbed interfaces:
199

200
```typescript
201
function TabsWithControls() {
202
  const code = [
203
    {
204
      fileName: 'App.tsx',
205
      code: 'function App() { return <div>Hello</div>; }',
206
      language: 'tsx'
207
    },
208
    {
209
      fileName: 'utils.js', 
210
      code: 'export const helper = () => {};',
211
      language: 'javascript'
212
    }
213
  ];
214

215
  return (
216
    <CodeHighlightTabs
217
      code={code}
218
      controls={[
219
        <CodeHighlight.Control key="download" tooltipLabel="Download project">
220
          <IconDownload size={14} />
221
        </CodeHighlight.Control>
222
      ]}
223
    />
224
  );
225
}
226
```
227

228
### Built-in Control Combination
229

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

232
```typescript
233
function CombinedControls() {
234
  return (
235
    <CodeHighlight
236
      code={longCodeExample}
237
      language="typescript"
238
      withCopyButton // Built-in copy button
239
      withExpandButton // Built-in expand button
240
      controls={[
241
        // Custom controls are added alongside built-in ones
242
        <CodeHighlight.Control key="share" tooltipLabel="Share">
243
          <IconShare size={14} />
244
        </CodeHighlight.Control>
245
      ]}
246
    />
247
  );
248
}
249
```
250

251
## Styling Integration
252

253
Controls automatically inherit theme styling and support all Mantine styling patterns:
254

255
- Theme-aware colors and spacing
256
- Support for color schemes (light/dark)
257
- Consistent hover and focus states
258
- Integration with `codeColorScheme` prop for contrast adjustment
259
- Full StylesAPI support for custom styling