Skip to content

Commit 2d50b59

Browse files
tscktsck
authored
[LG-5098] feat(CodeEditor): adds custom search panel (#3186)
* feat(SearchForm): add SearchForm component * feat(SearchForm): implement SearchForm component with toggle functionality and styling - Added the SearchForm component to the CodeEditor, featuring a toggle button for expanding and collapsing the search input. - Integrated LeafyGreen UI components for consistent styling and functionality. - Created a new story for SearchForm in Storybook to demonstrate its usage and appearance. - Updated CodeEditor to include the SearchForm, enhancing user interaction capabilities. * refactor(CodeEditor): add back in panel import * refactor(SearchForm): further correct styling * WIP * refactor(SearchForm): Further correct styling * make top row height more dynamic * fix top section height * WIP * Fix width styling * Fix box shadow * Add find functionality * Remove unnecessary space * Add find selected index rendering * Add replace functionality * Fix keyboard shortcuts * rename SearchForm to SearchPanel * fix top padding * Allow search panel to be disabled * fix dep array * only load search module when needed * fix darkmode and font size * fix deps * Fix focus and imports * prevent panel from overflowing editor * add filter menu * pull out all handler * add search panel tests * fix tests * changeset * remove unused styles * update changeset * ignore react client TS issue * add non-panel style * fix dep arr * Fix react 17 bug * Copilot feedback * Missed copilot feedback * CR first pass * Update search match background to match Code highlight * Fix R17 import * Revert "Update search match background to match Code highlight" This reverts commit 6bf2b88. * Fix darkmode implementation * Fix search panel sizing * Extract search logic into hook * Remove unused variables * Reapply "Update search match background to match Code highlight" This reverts commit ec510e5. * Possible color pallette for find * Remove 'all' option * Fix build? * Add require v import comment * Fix hook logic * refactor(SearchPanel): update selected index handling to use searchQuery parameter for improved accuracy * fix(SearchPanel): remove TypeScript error suppression for ref prop in TextInput component * fix(SearchPanel): adjust positioning and add right border to enhance layout
1 parent 090b547 commit 2d50b59

18 files changed

+1256
-54
lines changed

‎.changeset/yummy-jobs-wear.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@leafygreen-ui/code-editor': minor
3+
---
4+
5+
- Adds a custom search panel to the `CodeEditor` component. Contains all of the same functionality that was in the built in panel but matches the LG design language.
6+
- Adds prop to allow consumers to enable/disable the search panel.
7+

‎packages/code-editor/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ console.log(greet('MongoDB user'));`;
5757
| `enableCodeFolding` _(optional)_ | Enables code folding arrows in the gutter. | `boolean` | `undefined` |
5858
| `enableLineNumbers` _(optional)_ | Enables line numbers in the editor’s gutter. | `boolean` | `true` |
5959
| `enableLineWrapping` _(optional)_ | Enables line wrapping when the text exceeds the editor’s width. | `boolean` | `true` |
60+
| `enableSearchPanel` _(optional)_ | Enables the find and replace search panel in the editor that is displayed via the shortcut Ctrl/Cmd+F. | `boolean` | `true` |
6061
| `extensions` _(optional)_ | Additional CodeMirror extensions to apply to the editor. These will be applied with high precendence, meaning they can override extensions applied through built in props. See the [CodeMirror v6 System Guide](https://codemirror.net/docs/guide/) for more information. | `Array<CodeMirrorExtension>` | `[]` |
6162
| `forceParsing` _(optional)_ | _**This should be used with caution as it can significantly impact performance!**_<br><br>Forces the parsing of the complete document, even parts not currently visible.<br><br>By default, the editor optimizes performance by only parsing the code that is visible on the screen, which is especially beneficial when dealing with large amounts of code. Enabling this option overrides this behavior and forces the parsing of all code, visible or not. This should generally be reserved for exceptional circumstances. | `boolean` | `false` |
6263
| `height` _(optional)_ | Sets the editor's height. If not set, the editor will automatically adjust its height based on the content. | `string` | `undefined` |

‎packages/code-editor/package.json‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,15 +48,18 @@
4848
"@leafygreen-ui/a11y": "workspace:^",
4949
"@leafygreen-ui/badge": "workspace:^",
5050
"@leafygreen-ui/button": "workspace:^",
51+
"@leafygreen-ui/checkbox": "workspace:^",
5152
"@leafygreen-ui/emotion": "workspace:^",
5253
"@leafygreen-ui/hooks": "workspace:^",
5354
"@leafygreen-ui/icon": "workspace:^",
5455
"@leafygreen-ui/icon-button": "workspace:^",
56+
"@leafygreen-ui/input-option": "workspace:^",
5557
"@leafygreen-ui/leafygreen-provider": "workspace:^",
5658
"@leafygreen-ui/lib": "workspace:^",
5759
"@leafygreen-ui/menu": "workspace:^",
5860
"@leafygreen-ui/modal": "workspace:^",
5961
"@leafygreen-ui/palette": "workspace:^",
62+
"@leafygreen-ui/text-input": "workspace:^",
6063
"@leafygreen-ui/tokens": "workspace:^",
6164
"@leafygreen-ui/tooltip": "workspace:^",
6265
"@leafygreen-ui/typography": "workspace:^",

‎packages/code-editor/src/CodeEditor.stories.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,7 @@ const meta: StoryMetaType<typeof CodeEditor> = {
7676
enableCodeFolding: true,
7777
enableLineNumbers: true,
7878
enableLineWrapping: true,
79+
enableSearchPanel: true,
7980
baseFontSize: BaseFontSize.Body1,
8081
forceParsing: false,
8182
placeholder: 'Type your code here...',
@@ -113,6 +114,9 @@ const meta: StoryMetaType<typeof CodeEditor> = {
113114
enableLineNumbers: {
114115
control: { type: 'boolean' },
115116
},
117+
enableSearchPanel: {
118+
control: { type: 'boolean' },
119+
},
116120
enableLineWrapping: {
117121
control: { type: 'boolean' },
118122
},

0 commit comments

Comments
 (0)