Merge pull request #186 from qianmoQ/feature-components

feat(code editor): add some function
devlive-community · Dec 27, 2024 · 259d421 · 259d421
2 parents e62a428 + cfcb6fb
commit 259d421
Show file tree

Hide file tree

Showing 8 changed files with 795 additions and 10 deletions.
diff --git a/docs/components/view/code-editor.md b/docs/components/view/code-editor.md
@@ -162,6 +162,32 @@ This document describes the features and usage of the ShadcnCodeEditor component
 
 :::
 
+## Search
+
+::: raw
+
+<CodeRunner title="Search">
+    <ShadcnCodeEditor v-model="value"
+                      :search-config="{
+                            caseSensitive: false,
+                            replace: true
+                      }"/>
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+    <ShadcnCodeEditor v-model="value"
+                      :search-config="{
+                            caseSensitive: false,
+                            replace: true
+                      }"/>
+```
+
+:::
+
 ## CodeEditor Props
 
 <ApiTable title="Props"
@@ -172,6 +198,7 @@ This document describes the features and usage of the ShadcnCodeEditor component
         ['config', 'see monaco.editor.IStandaloneEditorConstructionOptions', 'any', '{}', '-'],
         ['autoCompleteConfig', 'see CodeEditorAutoCompleteProps', 'any', '{}', '-'],
         ['contextMenuConfig', 'see CodeEditorContextMenuProps', 'any', '{}', '-'],
+        ['searchConfig', 'see CodeEditorSearchProps', 'any', '{}', '-'],
     ]">
 </ApiTable>
 

diff --git a/src/App.vue b/src/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="p-4 min-h-screen space-y-6">
-    <h2 class="text-xl font-semibold mb-4">Code</h2>
+    <h2 class="text-xl font-semibold mb-4">Shadcn Code Editor</h2>
     <ShadcnCodeEditor v-model="value"
                       :auto-complete-config="{
                           endpoint: 'http://jsonplaceholder.typicode.com/posts',
@@ -22,7 +22,7 @@
                           //     code: context.modelValue,
                           //     position: context.position
                           // }),
-                          timeout: 1000,
+                          timeout: 3000,
                           maxSuggestions: 10
                         }"
                       :context-menu-config="{
@@ -35,6 +35,9 @@
                               }
                            }]
                       }"
+                      :search-config="{
+                          showHistory: true
+                      }"
     />
   </div>
 </template>

diff --git a/src/locales/en-US.ts b/src/locales/en-US.ts
@@ -296,11 +296,16 @@ export default {
             loading: 'Loading code hint...',
             copy: 'Copy',
             cut: 'Cut',
-            paste: 'Paste'
+            paste: 'Paste',
+            findInContext: 'Find in context',
+            replace: 'Replace',
+            replaceAll: 'Replace all'
         },
         validated: {
             endpoint: 'The API interface address must be provided',
-            transform: 'The transform function must be provided'
+            transform: 'The transform function must be provided',
+            regex: 'The regex is invalid',
+            search: 'Search error'
         }
     }
 }
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
@@ -296,11 +296,16 @@ export default {
             loading: '正在加载代码提示...',
             copy: '复制',
             cut: '剪切',
-            paste: '粘贴'
+            paste: '粘贴',
+            findInContext: '在文中查找',
+            replace: '替换',
+            replaceAll: '全部替换'
         },
         validated: {
             endpoint: '必须提供 API 接口地址',
-            transform: '必须提供转换函数'
+            transform: '必须提供转换函数',
+            regex: '正则表达式无效',
+            search: '搜索错误'
         }
     }
 }
diff --git a/src/ui/code-editor/ShadcnCodeEditor.vue b/src/ui/code-editor/ShadcnCodeEditor.vue
@@ -12,6 +12,7 @@ import { calcSize } from '@/utils/common.ts'
 import { registerApiCompletion } from './feature/auto-completion.ts'
 import { disableLanguageValidation } from './feature/disable_language_validation.ts'
 import { registerContextMenu } from './feature/context-menu.ts'
+import { registerSearchPanel } from './feature/search.ts'
 
 const props = withDefaults(defineProps<CodeEditorProps>(), {
   height: 300,
@@ -20,14 +21,22 @@ const props = withDefaults(defineProps<CodeEditorProps>(), {
     fontSize: 18,
     tabSize: 2
   } as any,
-  disableValidation: true
+  disableValidation: true,
+  searchConfig: {
+    caseSensitive: false,
+    replace: true,
+    matchWholeWord: false,
+    useRegex: false,
+    showHistory: false
+  } as any
 })
 
 const emit = defineEmits<CodeEditorEmits>()
 
 const editorContainer = ref<HTMLElement | null>(null)
 let editor: monaco.editor.IStandaloneCodeEditor | null = null
 let menuDisposable: { dispose: () => void } | null = null
+let searchPanelDisposable: { dispose: () => void } | null = null
 
 const initEditor = () => {
   if (!editorContainer.value) {
@@ -72,11 +81,17 @@ const initEditor = () => {
   }
 
   editor = monaco.editor.create(editorContainer.value, options)
+  editor.addCommand(monaco.KeyCode.KeyF | monaco.KeyMod.CtrlCmd, () => {
+  })
 
   if (props.contextMenuConfig) {
     menuDisposable = registerContextMenu(editor, props.contextMenuConfig)
   }
 
+  if (props.searchConfig) {
+    searchPanelDisposable = registerSearchPanel(editor, props.searchConfig)
+  }
+
   editor.onDidChangeModelContent(() => {
     emit('update:modelValue', editor?.getValue())
     emit('on-change', editor?.getValue())
@@ -129,5 +144,6 @@ onBeforeUnmount(() => {
     editor.dispose()
   }
   menuDisposable?.dispose()
+  searchPanelDisposable?.dispose()
 })
 </script>
diff --git a/src/ui/code-editor/feature/auto-completion.ts b/src/ui/code-editor/feature/auto-completion.ts
@@ -246,11 +246,17 @@ export function registerApiCompletion(editor: monaco.editor.IStandaloneCodeEdito
                     clearTimeout(timeoutId)
                     if (error.name === 'AbortError') {
                         console.error('Request timeout:', config.timeout + 'ms')
-                        completionContainer.style.display = 'none'
-                        currentTooltipCleanups.forEach(cleanup => cleanup())
+                        loadingContainer.style.display = 'none'
+                        suggestionsList.innerHTML = `<li class="suggestion-item px-3 py-2 text-red-500 select-none">Request timeout after ${ config.timeout }ms</li>`
+                        suggestionsList.style.display = 'block'
                         return { suggestions: [] }
                     }
-                    throw error
+
+                    loadingContainer.style.display = 'none'
+                    suggestionsList.innerHTML = `<li class="suggestion-item px-3 py-2 text-red-500 select-none">${ error.message }</li>`
+                    suggestionsList.style.display = 'block'
+                    currentTooltipCleanups.forEach(cleanup => cleanup())
+                    return { suggestions: [] }
                 }
 
                 const suggestions = config.transform ? config.transform(data) : data