DTStack / DTStack/monaco-sql-languages

替换 Monaco 内置的图标

Open
#105 5 comments 2 reactions 1 assignee Claimed by @liuxy0551 View on GitHub
new features
Dominant language
TypeScript
Stars
295
Forks
50
Avg merge
1h 21m
Merged PRs (30d)
1

Description

## Why?
monaco-sql-languages 支持的 language 都是各种 SQL,与之对应的就会有许多符号/icon是SQL语言特有的,比如 database 、table 等,而monaco 内置并不支持这些符号/icon,目前自动补全项左侧的 icon 问题尤为明显:

![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/ad0d55ec-eab0-43d5-b08c-2a4d4358a108)

## 方案概述
1. 制作自动补全项对应的 iconfont
2. 新增 css 文件,覆盖monaco 内置的字体图标

## 字体图标风格
与monaco/vscode 的字体图标风格保持一致 https://code.visualstudio.com/api/references/icons-in-labels#icon-listing
![image](https://github.com/DTStack/monaco-sql-languages/assets/58289241/5ad00f63-92c9-4bf7-bff6-d22a48dfff1c)

## 字体图标表

类型 | icon name
-- | --
keyword 关键字 | symbol-keyword
Snippet 代码片段 | symbol-snippet
catalog | symbol-catalog
database/schema 数据库 | symbol-database
table 表 | symbol-table
view 视图 | symbol-view
column 字段 | symbol-column
function 函数 | symbol-function
procedure 存储过程 | symbol-procedure

## SQL 补全项类型与 monaco 内置的 CompletionItemKind 映射表
自动补全项左侧会根据不同的自动补全项的 `CompletionItemKind` 属性显示不同的 icon,但是内置的类型并不能覆盖所有的 SQL 补全项类型,比如 table、database 等,所以需要一个类型映射

类型 | CompletionItemKind
-- | --
keyword 关键字 | CompletionItemKind.Keyword
Snippet 代码片段 | CompletionItemKind.Snippet
catalog | CompletionItemKind.Folder
database/schema 数据库 | CompletionItemKind.File
table 表 | CompletionItemKind.Class
view 视图 | CompletionItemKind.Interface
column 字段 | CompletionItemKind.Field
function 函数 | CompletionItemKind.Function
procedure 存储过程 | CompletionItemKind.Constructor

同时,monaco-sql-languages 需要新增公开的辅助方法,用于将 dt-sql-parser 中的 实体类型(`EntityContextType`/ `SyntaxContextType` )转换为 `CompletionItemKind`

```typescript
import { SyntaxContextType } from 'dt-sql-parser';
import { languages } from 'monaco-editor/esm/vs/editor/editor.api';

export function toCompletionItemKind(type: SyntaxContextType): languages.CompletionItemKind {
switch(type) {
case SyntaxContextType.CATALOG:
return languages.CompletionItemKind.Folder;
case SyntaxContextType.DATABASE:
return languages.CompletionItemKind.File;
// ...
default:
return languages.CompletionItemKind.Text;
}
}
```

## 覆盖 icon 的 css 文件参考
每一种类型对应的icon 类名格式为: `.codicon-${built-in-icon-name}`

内置的 icon 名称看这里: https://code.visualstudio.com/api/references/icons-in-labels#icon-listing

自动补全项的icon名称都是以 `symbol-` 为前缀的

```css
.codicon-symbol-text:before {
content: '\eb01';
}
.codicon-symbol-function:before {
content: '\eb02';
}
.codicon-symbol-folder:before {
content: '\eb03';
}
.codicon-symbol-field:before {
content: '\eb04';
}
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.