fix(playground): support spell check #4669
Conversation
Walkthrough本次提交新增了拼写检查相关的功能。首先，在 Changes
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
packages/brick-playground/src/index.tsOops! Something went wrong! :( ESLint: 9.22.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@next-core/eslint-config-next' imported from /eslint.config.mjs packages/brick-playground/src/spellCheck.worker.tsOops! Something went wrong! :( ESLint: 9.22.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@next-core/eslint-config-next' imported from /eslint.config.mjs packages/brick-playground/src/spellCheckRemoteWorker.tsOops! Something went wrong! :( ESLint: 9.22.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@next-core/eslint-config-next' imported from /eslint.config.mjs ✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Pull Request Overview
This PR adds support for spell checking in the playground by integrating a remote spell check web worker via Comlink. Key changes include:
- Adding a remote worker wrapper in spellCheckRemoteWorker.ts to initialize and cache the worker.
- Implementing spell check logic within spellCheck.worker.ts.
- Integrating spell check and a debounced trigger into the main editor in index.ts.
Reviewed Changes
Copilot reviewed 4 out of 5 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/brick-playground/src/spellCheckRemoteWorker.ts | Adds a remote worker wrapper for handling spell check requests |
| packages/brick-playground/src/spellCheck.worker.ts | Implements the worker that executes the spell check function |
| packages/brick-playground/src/index.ts | Integrates the remote spell check and debounced spell checking within the editor |
Files not reviewed (1)
- packages/brick-playground/package.json: Language not supported
Comments suppressed due to low confidence (1)
packages/brick-playground/src/index.ts:15
- The import is referencing a .js file, but the actual file is a TypeScript file. Consider updating the import to use the correct extension or adjusting the module resolution configuration.
import { getRemoteSpellCheckWorker } from "./spellCheckRemoteWorker.js";
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
packages/brick-playground/src/index.ts (2)
23-37: 已知词汇列表设计合理常量
KNOWN_WORDS包含了一系列不应被拼写检查器标记为错误的技术术语和专有名词。这是一个很好的做法，可以减少误报。随着项目发展，可能需要定期更新此列表。考虑将此列表移至配置文件或单独的模块，以便于维护。可以考虑将这个列表移动到单独的配置文件中:
-const KNOWN_WORDS = [ - "microapp", - "minmax", - "ctrl", - "dagre", - "rankdir", - "ranksep", - "nodesep", - "topo", - "plaintext", - "debuggable", - "async", - "searchable", -]; +import { KNOWN_WORDS } from "./spellCheckConfig.js";
493-504: 优化 debounce 函数声明
debounce函数声明使用了一般的Function类型，这在 TypeScript 中通常不推荐，因为它太宽泛。另外，考虑返回一个带有取消功能的函数，这样可以在需要时手动取消延迟的操作，提高灵活性。
建议修改为以下形式:
-function debounce(func: Function, timeout = 300) { +function debounce<T extends (...args: any[]) => any>(func: T, timeout = 300): (...args: Parameters<T>) => void { let timer = -1; return (...args: unknown[]) => { if (timer !== -1) { clearTimeout(timer); } timer = setTimeout(() => { timer = -1; func(...args); }, timeout) as unknown as number; }; }🧰 Tools
🪛 Biome (1.9.4)
[error] 493-493: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (4)
packages/brick-playground/package.json(1 hunks)packages/brick-playground/src/index.ts(3 hunks)packages/brick-playground/src/spellCheck.worker.ts(1 hunks)packages/brick-playground/src/spellCheckRemoteWorker.ts(1 hunks)
🧰 Additional context used
🧬 Code Definitions (1)
packages/brick-playground/src/index.ts (1)
packages/brick-playground/src/spellCheckRemoteWorker.ts (1)
getRemoteSpellCheckWorker(16-24)
🪛 Biome (1.9.4)
packages/brick-playground/src/index.ts
[error] 493-493: Don't use 'Function' as a type.
Prefer explicitly define the function shape. This type accepts any function-like value, which can be a common source of bugs.
(lint/complexity/noBannedTypes)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build (20.x)
🔇 Additional comments (6)
packages/brick-playground/package.json (1)
28-29: 依赖项添加合理新增的两个依赖项
@next-shared/spell-check和comlink直接支持拼写检查功能的实现。Comlink 的版本 4.4.2 是较新且稳定的版本，适合用于跨线程通信。packages/brick-playground/src/spellCheck.worker.ts (1)
1-15: Worker 实现简洁有效代码实现了一个简单明了的 Web Worker 类，通过 Comlink 库暴露 SpellCheckWorker 类，使主线程能够异步调用拼写检查功能而不阻塞 UI。
istanbul ignore file注释正确地将此文件排除在测试覆盖率统计之外，这对于 Worker 文件是合适的做法。packages/brick-playground/src/spellCheckRemoteWorker.ts (1)
1-31: 单例模式实现良好代码采用了良好的单例模式来管理 Worker 实例，确保只创建一个 Worker，并通过 Promise 机制提供异步访问。这种实现方式有效地避免了创建多个 Worker 实例的开销，同时保持了代码的整洁性。
Comlink 的 wrap 函数用于包装 Worker，使得可以像调用普通函数一样调用 Worker 中的方法，简化了跨线程通信的复杂性。
packages/brick-playground/src/index.ts (3)
15-15: 导入路径注意事项导入路径使用了
.js扩展名，与源文件的.ts扩展名不同。这在 TypeScript 项目中是常见的模式，因为编译后的文件会是 JS 文件。确保构建系统正确处理了这些导入路径转换。
249-271: 拼写检查实现优雅拼写检查功能的实现非常优雅。使用
debounce防止频繁调用，异步获取 Worker，然后将拼写检查的结果转换为 Monaco 编辑器的标记。代码结构清晰，容易理解。异步操作处理得当，使用
await等待 Worker 准备就绪和拼写检查完成。将标记位置从字符索引转换为行列位置的代码也很规范。
279-279: 正确集成到现有逻辑中在编辑器内容更改事件处理程序中调用
debouncedSpellCheck()，确保了拼写检查能够在用户输入后触发，同时不会影响其他现有功能。
next-core
|
||||||||||||||||||||||||||||
| Project |
next-core
|
| Branch Review |
steve/v3-playground-spell-check
|
| Run status |
|
| Run duration | 00m 23s |
| Commit |
|
| Committer | Shenwei Wang |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
0
|
Pending
|
0
|
Skipped
|
0
|
Passing
|
16
|
| View all changes introduced in this branch ↗︎ | |
依赖检查
组件之间的依赖声明，是微服务组件架构下的重要信息，请确保其正确性。
请勾选以下两组选项其中之一：
或者：
提交信息检查
Git 提交信息将决定包的版本发布及自动生成的 CHANGELOG，请检查工作内容与提交信息是否相符，并在以下每组选项中都依次确认。
破坏性变更：
feat作为提交类型。BREAKING CHANGE: 你的变更说明。新特性：
feat作为提交类型。问题修复：
fix作为提交类型。杂项工作：
即所有对下游使用者无任何影响、且没有必要显示在 CHANGELOG 中的改动，例如修改注释、测试用例、开发文档等：
chore,docs,test等作为提交类型。Summary by CodeRabbit