Skip to content

Commit 520ebd1

Browse files
tscktsck
committed
docs(README): update Panel component description and add download functionality details
- Enhanced the description of the Panel component to include the new download button and its integration with the CodeEditor's functionality. - Updated the properties table to reflect the addition of the download feature, including the `onDownloadClick` callback and its behavior. - Added a new section detailing the `downloadContent` method, including examples and supported file extensions for improved documentation clarity.
1 parent b53706d commit 520ebd1

File tree

1 file changed

+42
-17
lines changed

1 file changed

+42
-17
lines changed

‎packages/code-editor/README.md

Lines changed: 42 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ console.log(greet('MongoDB user'));`;
7777

7878
### `<Panel>`
7979

80-
The Panel component provides a toolbar interface for the CodeEditor with formatting, copying, and custom action buttons. It displays at the top of the CodeEditor and can include a title, action buttons, and custom content.
80+
The Panel component provides a toolbar interface for the CodeEditor with formatting, copying, download, and custom action buttons. It displays at the top of the CodeEditor and can include a title, action buttons, and custom content. When used within a CodeEditor, the Panel automatically integrates with the editor's functionality - the download button performs actual file downloads with appropriate extensions, undo/redo buttons operate on the editor history, and the format button processes the editor content.
8181

8282
#### Example
8383

@@ -112,22 +112,22 @@ import CloudIcon from '@leafygreen-ui/icon';
112112

113113
#### Properties
114114

115-
| Name | Description | Type | Default |
116-
| -------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | ----------- |
117-
| `baseFontSize` _(optional)_ | Font size of text in the panel. Controls the typography scale used for the panel title and other text elements. | `14 \| 16` | `14` |
118-
| `customSecondaryButtons` _(optional)_ | Array of custom secondary buttons to display in the secondary menu. Each button can include a label, icon, click handler, href, and aria-label for accessibility. | `Array<SecondaryButtonConfig>` | `undefined` |
119-
| `darkMode` _(optional)_ | Determines if the component appears in dark mode. When not provided, the component will inherit the dark mode state from the LeafyGreen Provider. | `boolean` | `undefined` |
120-
| `innerContent` _(optional)_ | React node to render between the title and the buttons. Can be used to add custom controls to the panel. | `React.ReactNode` | `undefined` |
121-
| `onCopyClick` _(optional)_ | Callback fired when the copy button is clicked. Called after the copy operation is attempted. | `() => void` | `undefined` |
122-
| `onDownloadClick` _(optional)_ | Callback fired when the download button in the secondary menu is clicked. Called after the download operation is attempted. | `() => void` | `undefined` |
123-
| `onFormatClick` _(optional)_ | Callback fired when the format button is clicked. Called after the formatting operation is attempted. | `() => void` | `undefined` |
124-
| `onRedoClick` _(optional)_ | Callback fired when the redo button in the secondary menu is clicked. Called after the redo operation is attempted. | `() => void` | `undefined` |
125-
| `onUndoClick` _(optional)_ | Callback fired when the undo button in the secondary menu is clicked. Called after the undo operation is attempted. | `() => void` | `undefined` |
126-
| `onViewShortcutsClick` _(optional)_ | Callback fired when the view shortcuts button in the secondary menu is clicked. Called after the view shortcuts operation is attempted. | `() => void` | `undefined` |
127-
| `showCopyButton` _(optional)_ | Determines whether to show the copy button in the panel. When enabled, users can copy the editor content to their clipboard. | `boolean` | `undefined` |
128-
| `showFormatButton` _(optional)_ | Determines whether to show the format button in the panel. When enabled and formatting is available for the current language, users can format/prettify their code. | `boolean` | `undefined` |
129-
| `showSecondaryMenuButton` _(optional)_ | Determines whether to show the secondary menu button (ellipsis icon) in the panel. When enabled, displays a menu with additional actions like undo, redo, download, and view shortcuts. | `boolean` | `undefined` |
130-
| `title` _(optional)_ | Title text to display in the panel header. Typically used to show the current language or content description. | `string` | `undefined` |
115+
| Name | Description | Type | Default |
116+
| -------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------ | ----------- |
117+
| `baseFontSize` _(optional)_ | Font size of text in the panel. Controls the typography scale used for the panel title and other text elements. | `14 \| 16` | `14` |
118+
| `customSecondaryButtons` _(optional)_ | Array of custom secondary buttons to display in the secondary menu. Each button can include a label, icon, click handler, href, and aria-label for accessibility. | `Array<SecondaryButtonConfig>` | `undefined` |
119+
| `darkMode` _(optional)_ | Determines if the component appears in dark mode. When not provided, the component will inherit the dark mode state from the LeafyGreen Provider. | `boolean` | `undefined` |
120+
| `innerContent` _(optional)_ | React node to render between the title and the buttons. Can be used to add custom controls to the panel. | `React.ReactNode` | `undefined` |
121+
| `onCopyClick` _(optional)_ | Callback fired when the copy button is clicked. Called after the copy operation is attempted. | `() => void` | `undefined` |
122+
| `onDownloadClick` _(optional)_ | Callback fired when the download button in the secondary menu is clicked. Called after the actual file download is triggered. When used within CodeEditor, downloads the editor content automatically. | `() => void` | `undefined` |
123+
| `onFormatClick` _(optional)_ | Callback fired when the format button is clicked. Called after the formatting operation is attempted. | `() => void` | `undefined` |
124+
| `onRedoClick` _(optional)_ | Callback fired when the redo button in the secondary menu is clicked. Called after the redo operation is attempted. | `() => void` | `undefined` |
125+
| `onUndoClick` _(optional)_ | Callback fired when the undo button in the secondary menu is clicked. Called after the undo operation is attempted. | `() => void` | `undefined` |
126+
| `onViewShortcutsClick` _(optional)_ | Callback fired when the view shortcuts button in the secondary menu is clicked. Called after the view shortcuts operation is attempted. | `() => void` | `undefined` |
127+
| `showCopyButton` _(optional)_ | Determines whether to show the copy button in the panel. When enabled, users can copy the editor content to their clipboard. | `boolean` | `undefined` |
128+
| `showFormatButton` _(optional)_ | Determines whether to show the format button in the panel. When enabled and formatting is available for the current language, users can format/prettify their code. | `boolean` | `undefined` |
129+
| `showSecondaryMenuButton` _(optional)_ | Determines whether to show the secondary menu button (ellipsis icon) in the panel. When enabled, displays a menu with additional actions like undo, redo, download, and view shortcuts. | `boolean` | `undefined` |
130+
| `title` _(optional)_ | Title text to display in the panel header. Typically used to show the current language or content description. | `string` | `undefined` |
131131

132132
#### `SecondaryButtonConfig`
133133

@@ -296,6 +296,12 @@ function MyComponent() {
296296
}
297297
};
298298

299+
const handleDownload = () => {
300+
if (editorRef.current) {
301+
editorRef.current.downloadContent('my-script'); // Downloads as 'my-script.js'
302+
}
303+
};
304+
299305
return (
300306
<>
301307
<CodeEditor
@@ -307,6 +313,7 @@ function MyComponent() {
307313
<button onClick={handleUndo}>Undo</button>
308314
<button onClick={handleRedo}>Redo</button>
309315
<button onClick={handleGetContents}>Get Contents</button>
316+
<button onClick={handleDownload}>Download</button>
310317
</>
311318
);
312319
}
@@ -321,8 +328,25 @@ The `CodeEditorHandle` provides the following methods:
321328
- **`isFormattingAvailable`** - Boolean indicating if formatting is available for the current language
322329
- **`undo()`** - Undoes the last editor action, returns boolean indicating success
323330
- **`redo()`** - Redoes the last undone action, returns boolean indicating success
331+
- **`downloadContent(filename?)`** - Downloads the editor content as a file with appropriate extension based on language
324332
- **`getEditorViewInstance()`** - Returns the underlying CodeMirror EditorView instance
325333

334+
#### Download Functionality
335+
336+
The `downloadContent` method automatically determines the appropriate file extension based on the editor's language:
337+
338+
```tsx
339+
// Downloads as 'script.js' (JavaScript extension)
340+
editorRef.current.downloadContent('script');
341+
342+
// Downloads as 'code.py' (default filename with Python extension)
343+
editorRef.current.downloadContent(); // No filename provided
344+
345+
// Downloads as 'document.txt' (fallback for unsupported/no language)
346+
```
347+
348+
**Supported language extensions:** `.js`, `.ts`, `.tsx`, `.jsx`, `.py`, `.java`, `.css`, `.html`, `.json`, `.go`, `.rs`, `.cpp`, `.cs`, `.kt`, `.php`, `.rb`, and `.txt` (fallback).
349+
326350
## Types and Variables
327351

328352
| Name | Description |
@@ -566,6 +590,7 @@ await editor.waitForEditorView();
566590
const handle = editor.getHandle();
567591
expect(typeof handle.undo).toBe('function');
568592
expect(typeof handle.redo).toBe('function');
593+
expect(typeof handle.downloadContent).toBe('function');
569594
```
570595

571596
#### `editor.interactions.undo()`

0 commit comments

Comments
 (0)